ironhack-labs · evafrances · Feb 13, 2019 · Feb 15, 2019 · Feb 15, 2019
diff --git a/starter-code/index.html b/starter-code/index.html
@@ -3,6 +3,8 @@
   <head>
     <title>Pizza Builder</title>
     <link rel="stylesheet" href="pizza.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="js/pizza.js"></script>
   </head>
 
   <body>
@@ -26,11 +28,12 @@ <h1>Pizza Builder</h1>
           <button class="btn btn-green-peppers active">Green peppers</button>
         </li>
         <li>
-          <button class="btn btn-sauce active">White sauce</button>
+          <button class="btn btn-crust active">Gluten-free crust</button>
         </li>
         <li>
-          <button class="btn btn-crust active">Gluten-free crust</button>
+          <button class="btn btn-sauce active">White sauce</button>
         </li>
+
       </ul>
     </div>
     <!-- End Controls -->
@@ -41,13 +44,13 @@ <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>
+        <li class = "ingredients visible">$1 pepperonni</li>
+        <li class = "ingredients visible">$1 mushrooms</li>
+        <li class = "ingredients visible">$1 green peppers</li>
+        <li class = "ingredients">$5 gluten-free crust</li>
+        <li class = "ingredients">$3 white sauce</li>
       </ul>
-      <strong>$21</strong>
+      <strong class= "totalPrice">$21</strong>
     </aside>
     <!-- End Price -->
 
@@ -268,9 +271,9 @@ <h2>Your pizza's price</h2>
       <section class="pep thirty-one">31</section>
       <section class="pep thirty-three">33</section>
 
-      <section class="crust crust-gluten-free">
+      <section class="crust">
         <section class="cheese"></section>
-        <section class="sauce sauce-white"></section>
+        <section class="sauce"></section>
       </section>
     </div>
     <!-- End Pizza -->
@@ -290,6 +293,6 @@ <h2>Your pizza's price</h2>
     <!-- Footer -->
 
     <script src="jquery-2.1.4.js"></script>
-    <script src="pizza.js"></script>
+
   </body>
 </html>
diff --git a/starter-code/js/pizza.js b/starter-code/js/pizza.js
@@ -0,0 +1,81 @@
+// Write your Pizza Builder JavaScript in this file.
+$(document).ready(function() {
+
+
+    var sumPrice = document.getElementsByClassName('ingredients');
+    var totalPrice = document.querySelector('.totalPrice');
+    var calculatePrice = 0;
+
+    //elegimos ingredientes, ingrediente-botón activo ||no ingrediente-no activo
+    $(".btn").removeClass("active")
+
+    $(".btn-pepperonni").click(function(event){
+        if ($(".pep").hasClass("pep-index")) {
+            $(".pep").removeClass("pep-index") && $(".price li:nth-child(1)").removeClass("visible");
+            $(".btn-pepperonni").removeClass("active")
+            totalPrice.innerHTML = calculatePrice -= 1;
+
+        } else {
+            $(".pep").addClass("pep-index") && $(".price li:nth-child(1)").addClass("visible");
+            $(".btn-pepperonni").addClass("active")
+            totalPrice.innerHTML = calculatePrice += 1;
+        }
+
+    })
+
+    $(".btn-mushrooms").click(function(event){
+        if ($(".mushroom").hasClass("mushroom-index")) {
+            $(".mushroom").removeClass("mushroom-index") && $(".price li:nth-child(2)").removeClass("visible");
+            $(".btn-mushrooms").removeClass("active")
+            totalPrice.innerHTML = calculatePrice -= 1;
+
+        } else {
+            $(".mushroom").addClass("mushroom-index") && $(".price li:nth-child(2)").addClass("visible");
+            $(".btn-mushrooms").addClass("active")
+            totalPrice.innerHTML = calculatePrice += 1;
+        }
+    })
+
+    $(".btn-green-peppers").click(function(event){
+        if ($(".green-pepper").hasClass("green-pepper-index")) {
+            $(".green-pepper").removeClass("green-pepper-index") && $(".price li:nth-child(3)").removeClass("visible");
+            $(".btn-green-peppers").removeClass("active")
+            totalPrice.innerHTML = calculatePrice -= 1;
+
+        } else {
+            $(".green-pepper").addClass("green-pepper-index") && $(".price li:nth-child(3)").addClass("visible");
+            $(".btn-green-peppers").addClass("active")
+            totalPrice.innerHTML = calculatePrice += 1;
+        }
+    }) 
+
+    $(".btn-sauce").click(function(event){
+        if ($(".sauce").hasClass("sauce-white")) {
+            $(".sauce").removeClass("sauce-white") && $(".price li:nth-child(5)").removeClass("visible");
+            $(".btn-sauce").removeClass("active")
+            totalPrice.innerHTML = calculatePrice -= 3;
+
+        } else {
+            $(".sauce").addClass("sauce-white") && $(".price li:nth-child(5)").addClass("visible");
+            $(".btn-sauce").addClass("active")
+            totalPrice.innerHTML = calculatePrice += 3;
+        }
+    })
+
+    $(".btn-crust").click(function(event){
+        if ($(".crust").hasClass("crust-gluten-free")) {
+            $(".crust").removeClass("crust-gluten-free") && $(".price li:nth-child(4)").removeClass("visible");
+            $(".btn-crust").removeClass("active")
+            totalPrice.innerHTML = calculatePrice -= 5;
+
+        } else {
+            $(".crust").addClass("crust-gluten-free") && $(".price li:nth-child(4)").addClass("visible");
+            $(".btn-crust").addClass("active")
+            totalPrice.innerHTML = calculatePrice += 5;
+        }
+    })
+
+
+
+});
+
diff --git a/starter-code/pizza.css b/starter-code/pizza.css
@@ -319,6 +319,12 @@ p.description {
   display: block;
   margin-top: 6px;
 }
+.ingredients{
+    visibility: hidden;
+}
+.visible{
+    visibility: visible;
+}
 
 /*--- Crust & Sauce ---*/
 .crust {
@@ -370,12 +376,12 @@ p.description {
 }
 
 .pep {
+    display: block;
     position: absolute;
     width: 80px;
     height: 70px;
     border-radius: 60px;
     background: #b3241c;
-    z-index: 15;
     font-size: 2em;
     text-align: center;
     padding-top: 10px;
@@ -384,6 +390,9 @@ p.description {
     text-indent: -9999px;
     color: #fff;
 }
+.pep-index{
+    z-index: 20;
+}
 /*.pep:hover{
     -moz-transform: scale(1.3);
     -webkit-transform: scale(1.3);
@@ -523,10 +532,12 @@ p.description {
     position: absolute;
     width: 70px;
     height: 75px;
-    z-index: 20;
     margin: 200px 0 0 200px;
     text-indent: -9999px;
 }
+.mushroom-index{
+    z-index: 40;
+}
 
 .cap {
     width: 70px;
@@ -811,7 +822,9 @@ p.description {
     background: #2f5e20;
     box-shadow: 2px 2px 2px rgba(66, 132, 45, .9);
     margin: 250px 0 0 400px;
-    z-index: 30;
+}
+.green-pepper-index{
+    z-index: 60;
 }
 
 .green-pepper.one {
@@ -853,7 +866,6 @@ p.description {
     -o-transform: rotate(-86deg);
     transform: rotate(-86deg);
 }
-
 .green-pepper.six {
     margin: 300px 0 0 200px;
     -webkit-transform: rotate(0deg);
@@ -982,6 +994,8 @@ p.description {
     transform: rotate(69deg);
 }
 
+/*------ Added clases -----*/
+
 /*------ Footer -----*/
 footer {
     margin: 0 0 30px 0;

diff --git a/starter-code/pizza.js b/starter-code/pizza.js