FT_WD_RMT_042024JesúsSuaste

index.html

@@ -38,16 +38,16 @@ <h1>Pizza Builder</h1>
     <!-- Price -->
     <aside class="panel price">
       <h2>Your pizza's price</h2>
-
+    
       <b>$10 cheese pizza</b>
       <ul>
-        <li>$1 pepperoni</li>
-        <li>$1 mushrooms</li>
-        <li>$1 green peppers</li>
-        <li>$3 white sauce</li>
-        <li>$5 gluten-free crust</li>
+        <li id="pepperoniPrice"> $1 pepperoni </li>
+        <li id="mushroomsPrice"> $1 mushrooms </li>
+        <li id="greenPeppersPrice"> $1 green peppers </li>
+        <li id="whiteSaucePrice" style="display: none"> $0 white sauce </li>
+        <li id="glutenFreeCrustPrice" style="display: none"> $0 gluten-free crust </li>
       </ul>
-      <strong>$21</strong>
+      <strong id="totalPrice"> $13 </strong>
     </aside>
     <!-- End Price -->
 

js/index.js

@@ -27,11 +27,11 @@ function renderEverything() {
   renderGreenPeppers();
   renderWhiteSauce();
   renderGlutenFreeCrust();
-
   renderButtons();
   renderPrice();
 }
 
+
 function renderPepperoni() {
   document.querySelectorAll('.pep').forEach((onePep) => {
     if (state.pepperoni) {
@@ -44,29 +44,107 @@ function renderPepperoni() {
 
 function renderMushrooms() {
   // Iteration 1: set the visibility of `<section class="mushroom">`
+  document.querySelectorAll('.mushroom').forEach((oneMush) => {
+    if (state.mushrooms) {
+      oneMush.style.visibility = 'visible';
+    } else {
+      oneMush.style.visibility = 'hidden';
+    }
+  });
 }
 
 function renderGreenPeppers() {
   // Iteration 1: set the visibility of `<section class="green-pepper">`
+  document.querySelectorAll('.green-pepper').forEach((onePep) => {
+    if (state.greenPeppers) {
+      onePep.style.visibility = 'visible';
+    } else {
+      onePep.style.visibility = 'hidden';
+    }
+  });
 }
-
 function renderWhiteSauce() {
   // Iteration 2: add/remove the class "sauce-white" of `<section class="sauce">`
+  let sauceElement = document.querySelector('.sauce');
+if (state.whiteSauce) {
+    sauceElement.classList.add('sauce-white');
+  } else {
+    sauceElement.classList.remove('sauce-white');
+  }
 }
 
 function renderGlutenFreeCrust() {
   // Iteration 2: add/remove the class "crust-gluten-free" of `<section class="crust">`
+  let crustElement = document.querySelector('.crust');
+  if (state.glutenFreeCrust) {
+      crustElement.classList.add('crust-gluten-free');
+    } else {
+      crustElement.classList.remove('crust-gluten-free');
+    }
 }
 
 function renderButtons() {
   // Iteration 3: add/remove the class "active" of each `<button class="btn">`
+  let pepBtn = document.querySelector('.btn-pepperoni')
+  if (state.pepperoni)  { pepBtn.classList.add('active') }
+  else                  {pepBtn.classList.remove('active') }
+
+  let mushBtn = document.querySelector('.btn-mushrooms')
+  if (state.mushrooms)  { mushBtn.classList.add('active') }
+  else                  {mushBtn.classList.remove('active') }
+
+  let greenBtn = document.querySelector('.btn-green-peppers')
+  if (state.greenPeppers)  { greenBtn.classList.add('active') }
+  else                  {greenBtn.classList.remove('active') }
+
+  let sauceBtn = document.querySelector('.btn-sauce')
+  if (state.whiteSauce) { sauceBtn.classList.add('active') }
+  else                  {sauceBtn.classList.remove('active') }
+
+  let crustBtn = document.querySelector('.btn-crust')
+  if (state.glutenFreeCrust)  { crustBtn.classList.add('active') }
+  else                  {crustBtn.classList.remove('active') } 
 }
 
 function renderPrice() {
-  // Iteration 4: change the HTML of `<aside class="panel price">`
+    let pay = {
+    pep: state.pepperoni? 1:0,
+    mush: state.mushrooms? 1: 0,
+    green: state.greenPeppers? 1:0,
+    sauce: state.whiteSauce? 3 : 0,
+    crust: state.glutenFreeCrust? 5 : 0
+    }
+    pay.total= Object.values(pay).reduce( (a,b) => a+b, 10)
+
+    document.getElementById("pepperoniPrice").innerText=
+      `$${pay.pep} pepperoni`;
+    document.getElementById("pepperoniPrice").style.display = 
+      state.pepperoni? '' : 'none'
+
+    document.getElementById("mushroomsPrice").innerText=
+      `$${pay.mush} mushrooms`;
+    document.getElementById("mushroomsPrice").style.display = 
+      state.mushrooms? '' : 'none'  
+
+    document.getElementById("greenPeppersPrice").innerText=
+      `$${pay.green} green peppers`;
+    document.getElementById("greenPeppersPrice").style.display = 
+      state.greenPeppers? '' : 'none' 
+
+    document.getElementById("whiteSaucePrice").innerText=
+      `$${pay.sauce} white sauce`;
+    document.getElementById("whiteSaucePrice").style.display = 
+      state.whiteSauce? '' : 'none'
+
+    document.getElementById("glutenFreeCrustPrice").innerText=
+      `$${pay.crust} gluten-free crust`;
+    document.getElementById("glutenFreeCrustPrice").style.display = 
+      state.glutenFreeCrust? '' : 'none'
+
+    document.getElementById("totalPrice").innerText =
+        `$${pay.total}`
 }
 
-renderEverything();
 
 // Iteration 1: Example of a click event listener on `<button class="btn btn-pepperoni">`
 document.querySelector('.btn.btn-pepperoni').addEventListener('click', function () {
@@ -75,9 +153,24 @@ document.querySelector('.btn.btn-pepperoni').addEventListener('click', function
 });
 
 // Iteration 1: Add click event listener on `<button class="btn btn-mushrooms">`
-
+document.querySelector('.btn.btn-mushrooms').addEventListener('click', function () {
+  state.mushrooms = !state.mushrooms;
+  renderEverything();
+});
 // Iteration 1: Add click event listener on `<button class="btn btn-green-peppers">`
+document.querySelector('.btn.btn-green-peppers').addEventListener('click', function () {
+  state.greenPeppers = !state.greenPeppers;
+  renderEverything();
+});
 
 // Iteration 2: Add click event listener on `<button class="btn btn-sauce">`
+document.querySelector('.btn.btn-sauce').addEventListener("click", function() {
+  state.whiteSauce = !state.whiteSauce;
+  renderEverything();
+})
 
 // Iteration 2: Add click event listener on `<button class="btn btn-crust">`
+document.querySelector('.btn.btn-crust').addEventListener("click", function() {
+  state.glutenFreeCrust = !state.glutenFreeCrust;
+  renderEverything();
+})

styles/style.css

@@ -140,6 +140,7 @@ body {
   margin: 0 7px 11px 0;
   padding: 0 20px;
   text-align: center;
+  opacity: .6;
 
   /* Smoothing out hover using css3 transitions, if not, the pressed button effect looks a bit hard */
   transition: all 0.2s ease;
@@ -222,7 +223,10 @@ p.description {
   box-shadow: 0 5px #69071b;
   color: #fff;
 }
+.active {
+  opacity: 1;
 
+}
 .btn-pepperoni.active {
   top: 2px;
   box-shadow: 0 2px #890923;