diff --git a/starter-code/index.html b/starter-code/index.html
index 189a3311..07c7a735 100755
--- a/starter-code/index.html
+++ b/starter-code/index.html
@@ -40,14 +40,14 @@ <h1>Pizza Builder</h1>
       <h2>Your pizza's price</h2>
 
       <b>$10 cheese pizza</b>
-      <ul>
-        <li>$1 pepperonni</li>
-        <li>$1 mushrooms</li>
-        <li>$1 green peppers</li>
-        <li>$3 white sauce</li>
-        <li>$5 gluten-free crust</li>
+      <ul class="ul">
+        <li id="li-1">$1 pepperonni</li>
+        <li id="li-2">$1 mushrooms</li>
+        <li id="li-3">$1 green peppers</li>
+        <li id="li-4">$3 white sauce</li>
+        <li id="li-5">$5 gluten-free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong>$<span class="total">21</span></strong>
     </aside>
     <!-- End Price -->
 
diff --git a/starter-code/pizza.css b/starter-code/pizza.css
index 2d125b3d..73d3020b 100755
--- a/starter-code/pizza.css
+++ b/starter-code/pizza.css
@@ -321,6 +321,8 @@ p.description {
 }
 
 /*--- Crust & Sauce ---*/
+
+
 .crust {
     width: 700px;
     height: 700px;
@@ -331,9 +333,9 @@ p.description {
 }
 
 .crust-gluten-free {
-  background-color: #e0d5cf;
-  box-shadow: inset 0 0 40px #d3c3bb;
-}
+    background-color: #e0d5cf;
+    box-shadow: inset 0 0 40px #d3c3bb;
+  }
 
 .sauce {
     position: absolute;
@@ -1036,4 +1038,11 @@ footer a:hover {
     footer {
         margin: 70px 0 10px 0;
     }
+
+
+
 }
+
+.hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/starter-code/pizza.js b/starter-code/pizza.js
index b473d048..60dc5f2d 100755
--- a/starter-code/pizza.js
+++ b/starter-code/pizza.js
@@ -1 +1,131 @@
 // Write your Pizza Builder JavaScript in this file.
+$("document").ready(function () {
+
+    // make crust and red sauce default on load
+    $(".crust").removeClass("crust-gluten-free");
+
+    $(".sauce").removeClass("sauce-white");
+
+    //setting default price on load
+    $(".total").html("13");
+
+
+
+
+    // "if the ingredient is turned on, its button should have active."
+    //removing active class so it will appear again on click. 
+
+    // $(".btn-green-peppers").removeClass("active");
+
+    // $(".btn-mushrooms").removeClass("active");
+
+    // $(".btn-pepperonni").removeClass("active");
+
+    $(".btn-sauce").removeClass("active");
+
+    $(".btn-crust").removeClass("active");
+
+    //remove white sauce and gluten free from price list on load
+    $("#li-5").addClass("hidden") //crust
+    $("#li-4").addClass("hidden") //sauce
+
+
+
+    //adding/removing ingredientes by adding the class hidden
+    //adding/removing class active  
+    $(".btn-green-peppers").click(function () {
+        $(".green-pepper").toggleClass("hidden");
+        $(".btn-green-peppers").toggleClass("active");
+        $("#li-3").toggleClass("hidden");
+        var className = $(this).attr('class')
+
+        var total = $(".total").html();
+
+        if (className === "btn btn-green-peppers active") {
+            $(".total").html(parseFloat(total) + 1);
+
+        } else {
+            $(".total").html(parseFloat(total) - 1);
+        }
+
+    });
+
+
+    $(".btn-mushrooms").click(function () {
+        $(".mushroom").toggleClass("hidden");
+        $(".btn-mushrooms").toggleClass("active");
+        $("#li-2").toggleClass("hidden");
+        var className = $(this).attr('class')
+
+        var total = $(".total").html();
+
+        if (className === "btn btn-mushrooms active") {
+            $(".total").html(parseFloat(total) + 1);
+
+        } else {
+            $(".total").html(parseFloat(total) - 1);
+        }
+
+    });
+
+    $(".btn-pepperonni").click(function () {
+        $(".pep").toggleClass("hidden");
+        $(".btn-pepperonni").toggleClass("active");
+        $("#li-1").toggleClass("hidden");
+
+        var className = $(this).attr('class')
+
+        var total = $(".total").html();
+
+        if (className === "btn btn-pepperonni active") {
+            $(".total").html(parseFloat(total) + 1);
+
+        } else {
+            $(".total").html(parseFloat(total) - 1);
+        }
+    });
+
+    $(".btn-sauce").click(function () {
+        $(".sauce").toggleClass("sauce-white");
+        $(".btn-sauce").toggleClass("active");
+        $("#li-4").toggleClass("hidden");
+        //var className stores all class values of sauce 
+        var className = $(this).attr('class')
+
+        //var total contains the initial total price before click
+        var total = $(".total").html();
+
+        if (className === "btn btn-sauce active") {
+            $(".total").html(parseFloat(total) + 3);
+
+        } else {
+            $(".total").html(parseFloat(total) - 3);
+        }
+
+    });
+
+    $(".btn-crust").click(function () {
+        $(".crust").toggleClass("crust-gluten-free");
+        $(".btn-crust").toggleClass("active");
+        $("#li-5").toggleClass("hidden");
+
+        //var className contains the complete class value 
+        var className = $(this).attr('class')
+
+        //var total contains the initial total price before click
+        var total = $(".total").html();
+
+        //In case the button has active in his class (which means pressed), i need to add +5 to the price 
+        if (className === "btn btn-crust active") {
+            $(".total").html(parseFloat(total) + 5);
+            //In case the button crust does not have active in the class (which means unpressed) i need to extract -5 from the price.
+        } else {
+            $(".total").html(parseFloat(total) - 5);
+        }
+
+
+    });
+
+});
+
+