done exercise pizza builder

starter-code/index.html

@@ -17,19 +17,19 @@ <h1>Pizza Builder</h1>
     <div class="panel controls">
       <ul>
         <li>
-          <button class="btn btn-pepperonni active">Pepperonni</button>
+          <button data-id=".pep" data-topping="pepperonni" data-class="hidden" class="btn btn-pepperonni active">Pepperonni</button>
         </li>
         <li>
-          <button class="btn btn-mushrooms active">Mushrooms</button>
+          <button data-id=".mushroom" data-topping="mushroom" data-class="hidden" class="btn btn-mushrooms active">Mushrooms</button>
         </li>
         <li>
-          <button class="btn btn-green-peppers active">Green peppers</button>
+          <button data-id=".green-pepper" data-topping="green peppers" data-class="hidden" class="btn btn-green-peppers active">Green peppers</button>
         </li>
         <li>
-          <button class="btn btn-sauce active">White sauce</button>
+          <button data-id=".sauce" data-class="sauce-white" data-topping="white sauce" class="btn btn-sauce active">White sauce</button>
         </li>
         <li>
-          <button class="btn btn-crust active">Gluten-free crust</button>
+          <button data-id=".crust" data-class="crust-gluten-free" data-topping="crust" class="btn btn-crust active">Gluten-free crust</button>
         </li>
       </ul>
     </div>
@@ -39,15 +39,15 @@ <h1>Pizza Builder</h1>
     <aside class="panel price">
       <h2>Your pizza's price</h2>
 
-      <b>$10 cheese pizza</b>
+      <b>$<span class="pprice">10</span> 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>
+        <li>$<span class="pprice">1</span> pepperonni</li>
+        <li>$<span class="pprice">1</span> mushrooms</li>
+        <li>$<span class="pprice">1</span> green peppers</li>
+        <li>$<span class="pprice">3</span> white sauce</li>
+        <li>$<span class="pprice">5</span> gluten-free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong>$<span class="ptotal">0</span></strong>
     </aside>
     <!-- End Price -->
 
@@ -289,7 +289,7 @@ <h2>Your pizza's price</h2>
     </footer>
     <!-- Footer -->
 
-    <script src="jquery-2.1.4.js"></script>
+    <script src="jquery-3.4.1.min.js"></script>
     <script src="pizza.js"></script>
   </body>
 </html>

starter-code/pizza.css

@@ -142,6 +142,10 @@ p.description {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
+/*------ Visibility -----*/
+.hidden {
+    display: none;
+}
 
 /*------ Controls -----*/
 .controls {
@@ -384,6 +388,9 @@ p.description {
     text-indent: -9999px;
     color: #fff;
 }
+.pep.hide {
+    display:none;
+}
 /*.pep:hover{
     -moz-transform: scale(1.3);
     -webkit-transform: scale(1.3);
@@ -527,7 +534,9 @@ p.description {
     margin: 200px 0 0 200px;
     text-indent: -9999px;
 }
-
+.mushroom.hide {
+    display: none;
+}
 .cap {
     width: 70px;
     height: 35px;
@@ -813,6 +822,9 @@ p.description {
     margin: 250px 0 0 400px;
     z-index: 30;
 }
+.green-pepper.hide {
+    display: none;
+}
 
 .green-pepper.one {
     margin: 200px 0 0 100px;

starter-code/pizza.js

@@ -1 +1,55 @@
 // Write your Pizza Builder JavaScript in this file.
+$( document ).ready(function() {
+  let listItems = [];
+
+  //default setting for the pizza
+  $(".crust").removeClass("crust-gluten-free");
+  $(".sauce").removeClass("sauce-white");
+  $(".btn-crust").removeClass("active");
+  $(".btn-sauce").removeClass("active");
+
+  //default setting for the price of the pizza
+  listItems.push($(".price li:contains('white sauce')").closest("li").detach());
+  listItems.push($(".price li:contains('crust')").closest("li").detach());
+
+  //calculate price of the pizza
+  calculatePrice();
+
+
+  $(".btn").click(function(){
+
+    const $this = $(this) //better for performance
+
+    const toRemove = $this.data("id");
+    const classToggle = $this.data("class");
+    const topping = $this.data("topping");
+
+    $(toRemove).toggleClass( classToggle );
+    $(this).toggleClass("active");
+
+    if ($(this).hasClass("active")) {   
+      //filter the selected toppng from the array
+      const selectedItem = listItems.filter(item => {
+        return item[0].innerHTML.includes(`${topping}`);
+      })
+
+      $(".price ul").append(selectedItem);
+    } else {
+      let listItem = $(`.price li:contains(${topping})`).closest("li").detach();
+      listItems.push(listItem);
+    }
+    calculatePrice();
+   })
+
+});
+
+function calculatePrice() {
+  let sum = 0;
+
+  $('.pprice').each(function() {
+    sum += Number($(this).html());
+  });
+
+  $(".ptotal").html(sum);
+
+}