solved

js/index.js

@@ -44,40 +44,129 @@ function renderPepperoni() {
 
 function renderMushrooms() {
   // Iteration 1: set the visibility of `<section class="mushroom">`
+
+  document.querySelectorAll('.mushroom').forEach((mush) => {
+    if(state.mushrooms){
+      mush.style.visibility = 'visible';
+    }
+    else {
+      mush.style.visibility = 'hidden' ;
+    }
+  })
+
 }
 
 function renderGreenPeppers() {
   // Iteration 1: set the visibility of `<section class="green-pepper">`
-}
+
+  document.querySelectorAll('.green-pepper').forEach((pepper) => {
+    if(state.greenPeppers) {
+      pepper.style.visibility = 'visible';
+    }
+      else {
+      pepper.style.visibility = 'hidden';
+    }
+  })
+  }
+
 
 function renderWhiteSauce() {
   // Iteration 2: add/remove the class "sauce-white" of `<section class="sauce">`
-}
+      if(state.whiteSauce) {
+
+        document.querySelector("section.sauce").classList.remove("sauce-white")
+      }
+      else {
+        document.querySelector("section.sauce").classList.add("sauce-white")
+      }
+  }
 
 function renderGlutenFreeCrust() {
   // Iteration 2: add/remove the class "crust-gluten-free" of `<section class="crust">`
-}
+  if(state.glutenFreeCrust) {
+    document.querySelector("section.crust").classList.remove("crust-gluten-free")
+  }
+  else{
+    document.querySelector("section.crust").classList.add("crust-gluten-free")
+  }
+  }
+
 
 function renderButtons() {
+
   // Iteration 3: add/remove the class "active" of each `<button class="btn">`
-}
 
+ const button = [...document.querySelectorAll(".btn")]
+
+  button.forEach(button => {
+    const ingredient = button.dataset.ingredient;
+
+    if(state[ingredient]) {
+      button.classList.add("active")
+    }
+    else {
+      button.classList.remove("active")
+    }
+  })
+}
 function renderPrice() {
   // Iteration 4: change the HTML of `<aside class="panel price">`
+
+  let totalPrice = basePrice;
+
+  let priceIngredientLi = "";
+
+  Object.entries(ingredients).forEach(([ingredient, ingredientDetails]) => {
+    if (state[ingredient]) {
+      priceIngredientLi += `
+        <li>$ ${ingredientDetails.price} ${ingredientDetails.name}</li>
+      `;
+      totalPrice += ingredientDetails.price;
+    }
+  });
+
+  const pricePanelHTML = `
+    <h2>Your Pizza's price</h2>
+    <b>$${basePrice} cheese pizza</b>
+    <ul>
+      ${priceIngredientLi}
+    </ul>
+    <strong>$ ${totalPrice}</strong>
+  `;
+
+  document.querySelector(".panel.price").innerHTML = pricePanelHTML;
 }
 
 renderEverything();
 
+
 // Iteration 1: Example of a click event listener on `<button class="btn btn-pepperoni">`
 document.querySelector('.btn.btn-pepperoni').addEventListener('click', function () {
   state.pepperoni = !state.pepperoni;
   renderEverything();
 });
 
 // Iteration 1: Add click event listener on `<button class="btn btn-mushrooms">`
+document.querySelector('.btn.btn-mushrooms').addEventListener('click', () =>{
+  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', () =>{
+  state.greenPeppers = !state.greenPeppers;
+  renderEverything();
+})
 
 // Iteration 2: Add click event listener on `<button class="btn btn-sauce">`
 
+document.querySelector('.btn.btn-sauce').addEventListener('click', () => {
+      state.whiteSauce = !state.whiteSauce
+      renderEverything();
+})
+
 // Iteration 2: Add click event listener on `<button class="btn btn-crust">`
+document.querySelector('.btn.btn-crust').addEventListener('click', () => {
+  state.glutenFreeCrust = !state.glutenFreeCrust
+  renderEverything();
+})