ioav-livneh

starter-code/index.html

@@ -40,19 +40,21 @@ <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 id="price-list">
+        <li id="pepperonni-price">$1 pepperonni</li>
+        <li id="mushroom-price">$1 mushrooms</li>
+        <li id="pepper-price">$1 green peppers</li>
+        <li id="sauce-price">$3 white sauce</li>
+        <li id="crust-price">$5 gluten-free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong>$<span id="total-price">13</span></strong>
     </aside>
     <!-- End Price -->
 
     <!-- Begin Pizza -->
     <div id="pizza">
+
+      <div class="peppers">
       <section class="green-pepper one"></section>
       <section class="green-pepper two"></section>
       <section class="green-pepper three"></section>
@@ -74,7 +76,9 @@ <h2>Your pizza's price</h2>
       <section class="green-pepper nineteen"></section>
       <section class="green-pepper twenty"></section>
       <section class="green-pepper twenty-one"></section>
+    </div>
 
+    <div class="mushrooms">
       <section class="mushroom one">
         <div class="cap">1</div>
         <div class="stem"></div>
@@ -234,7 +238,9 @@ <h2>Your pizza's price</h2>
         <div class="cap">31</div>
         <div class="stem"></div>
       </section>
+    </div>
 
+    <div class="pepperonnis">
       <section class="pep one">1</section>
       <section class="pep two">2</section>
       <section class="pep three">3</section>
@@ -267,6 +273,7 @@ <h2>Your pizza's price</h2>
       <section class="pep thirty">30</section>
       <section class="pep thirty-one">31</section>
       <section class="pep thirty-three">33</section>
+    </div>
 
       <section class="crust crust-gluten-free">
         <section class="cheese"></section>

starter-code/pizza.js

@@ -1 +1,98 @@
 // Write your Pizza Builder JavaScript in this file.
+
+$("document").ready(function(){
+
+    changeSauce()
+    changeCrust()
+
+    var total = 13
+
+    function changePepperonni(){
+        $(".pepperonnis").toggle() 
+        $(".btn-pepperonni").toggleClass("active") 
+        if($(".btn-pepperonni").hasClass("active")){ 
+            $("#pepperonni-price").html("$1 pepperonni")
+            $("#pepperonni-price").toggle()
+            total += 1;
+            $("#total-price").html(total)
+        }
+        else{ 
+            $("#pepperonni-price").toggle()
+            total -=1;
+            $("#total-price").html(total)
+        }        
+    }
+
+    function changeMushrooms(){
+        $(".mushrooms").toggle()
+        $(".btn-mushrooms").toggleClass("active")
+        if($(".btn-mushrooms").hasClass("active")){
+            $("#mushroom-price").html("$1 mushrooms")
+            $("#mushroom-price").toggle()
+            total += 1;
+            $("#total-price").html(total)
+        }
+        else{
+            $("#mushroom-price").toggle()
+            total -=1;
+            $("#total-price").html(total)
+        }
+    }
+
+    function changePeppers(){
+        $(".peppers").toggle()
+        $(".btn-green-peppers").toggleClass("active")
+        if($(".btn-green-peppers").hasClass("active")){
+            $("#pepper-price").html("$1 green peppers")
+            $("#pepper-price").toggle()
+            total += 1;
+            $("#total-price").html(total)
+        }
+        else{
+            $("#pepper-price").toggle()
+            total -=1;
+            $("#total-price").html(total)
+        }
+    }
+
+    function changeSauce(){
+        $(".btn-sauce").toggleClass("active")
+        $(".sauce").toggleClass("sauce-white")
+        if($(".btn-sauce").hasClass("active")){
+            $("#sauce-price").html("$3 white sauce")
+            $("#sauce-price").toggle()
+            total += 3;
+            $("#total-price").html(total)
+        }
+        else{
+            $("#sauce-price").toggle()
+            total -=3;
+            $("#total-price").html(total)
+        }
+    }
+
+    function changeCrust(){
+        $(".btn-crust").toggleClass("active")
+        $(".crust").toggleClass("crust-gluten-free")
+        if($(".btn-crust").hasClass("active")){
+            $("#crust-price").html("$5 gluten-free crust")
+            $("#crust-price").toggle()
+            total += 5;
+            $("#total-price").html(total)
+        }
+        else{
+            $("#crust-price").toggle()
+            total -=5;
+            $("#total-price").html(total)
+        }
+    }
+
+    $(".btn-pepperonni").click(changePepperonni)
+    $(".btn-mushrooms").click(changeMushrooms)
+    $(".btn-green-peppers").click(changePeppers)
+    $(".btn-sauce").click(changeSauce)
+    $(".btn-crust").click(changeCrust)
+
+    $("#total-price").html(total)
+
+})