done

src/App.jsx

@@ -6,33 +6,24 @@ import Pizza from './components/Pizza'
 import Footer from './components/Footer'
 
 function App() {
-  // TODO (Iteration 1): define the pizza state with useState.
-  //   Each ingredient should start as `true` (all toppings visible by default).
-  //
-  //   const [pizza, setPizza] = useState({
-  //     pepperoni: true,
-  //     mushrooms: true,
-  //     greenPeppers: true,
-  //     whiteSauce: true,
-  //     glutenFreeCrust: true,
-  //   })
 
-  // TODO (Iteration 1): implement a handleToggle(ingredient) function that flips
-  // the value of the given ingredient in the state and call setPizza with the
-  // new object. Pass it down to <Controls /> as the `onToggle` prop.
+const [pizza, setPizza] = useState({
+  pepperoni: true,
+  mushrooms: true,
+  greenPeppers: true,
+  whiteSauce: true,
+  glutenFreeCrust: true,
+})
+
+function handleToggle(ingredient) {
+  setPizza({...pizza, [ingredient]:!pizza[ingredient]})
+}
 
-  const pizza = {
-    pepperoni: true,
-    mushrooms: true,
-    greenPeppers: true,
-    whiteSauce: true,
-    glutenFreeCrust: true,
-  }
 
   return (
     <>
       <Header />
-      <Controls pizza={pizza} onToggle={() => {}} />
+      <Controls pizza={pizza} onToggle={handleToggle} />
       <Price pizza={pizza} />
       <Pizza pizza={pizza} />
       <p id="crumbs">&there4;</p>

src/components/Controls.jsx

@@ -1,24 +1,35 @@
+import IngredientButton from "./ingredientButton"
+
+
 function Controls({ pizza, onToggle }) {
-  // TODO (Iteration 1+): wire each button's onClick to onToggle(<ingredient-name>)
-  // TODO: add/remove the "active" class on each button based on the pizza state
 
   return (
     <div className="panel controls">
       <ul>
         <li>
-          <button className="btn btn-pepperoni active">pepperoni</button>
+          <IngredientButton active={pizza.pepperoni} className="btn-pepperoni" onClick={() => onToggle("pepperoni")}>
+            Pepperoni
+          </IngredientButton>
         </li>
         <li>
-          <button className="btn btn-mushrooms active">Mushrooms</button>
+          <IngredientButton active={pizza.mushrooms} className="btn-mushrooms" onClick={() => onToggle("mushrooms")}>
+            Mushrooms
+          </IngredientButton>
         </li>
         <li>
-          <button className="btn btn-green-peppers active">Green peppers</button>
+          <IngredientButton active={pizza.greenPeppers} className="btn-green-peppers" onClick={() => onToggle("greenPeppers")}>
+            Green peppers
+          </IngredientButton>
         </li>
         <li>
-          <button className="btn btn-sauce active">White sauce</button>
+          <IngredientButton active={pizza.whiteSauce} className="btn-sauce" onClick={() => onToggle("whiteSauce")}>
+            White sauce
+          </IngredientButton>
         </li>
         <li>
-          <button className="btn btn-crust active">Gluten-free crust</button>
+          <IngredientButton active={pizza.glutenFreeCrust} className="btn-crust" onClick={() => onToggle("glutenFreeCrust")}>
+            Gluten-free crust
+          </IngredientButton>
         </li>
       </ul>
     </div>

src/components/Pizza.jsx

@@ -7,33 +7,31 @@ import {
 function Pizza({ pizza }) {
   return (
     <div id="pizza">
-      {/* Green peppers */}
-      {GREEN_PEPPER_POSITIONS.map((position) => (
+
+      {pizza.pepperoni && PEPPERONI_POSITIONS.map((position, index) => (
+        <section key={`pep-${position}`} className={`pep ${position}`}>
+          {index + 1}
+        </section>
+      ))}
+
+      {pizza.greenPeppers && GREEN_PEPPER_POSITIONS.map((position) => (
         <section
           key={`green-pepper-${position}`}
           className={`green-pepper ${position}`}
         />
       ))}
 
-      {/* Mushrooms */}
-      {MUSHROOM_POSITIONS.map((position, index) => (
+      {pizza.mushrooms && MUSHROOM_POSITIONS.map((position, index) => (
         <section key={`mushroom-${position}`} className={`mushroom ${position}`}>
           <div className="cap">{index + 1}</div>
           <div className="stem"></div>
         </section>
       ))}
 
-      {/* Pepperoni */}
-      {PEPPERONI_POSITIONS.map((position, index) => (
-        <section key={`pep-${position}`} className={`pep ${position}`}>
-          {index + 1}
-        </section>
-      ))}
-
-      {/* Crust + Cheese + Sauce */}
-      <section className="crust crust-gluten-free">
+
+      <section className={`crust ${pizza.glutenFreeCrust ? "crust-gluten-free" : ""}`}>
         <section className="cheese"></section>
-        <section className="sauce sauce-white"></section>
+        <section className={`sauce ${pizza.whiteSauce ? "sauce-white" : ""}`}></section>
       </section>
     </div>
   )

src/components/Price.jsx

@@ -1,29 +1,23 @@
+import calculatePrice from "./calculatePrice"
+
 function Price({ pizza }) {
-  // TODO (Iteration 4):
-  //   1. Hide each <li> when its ingredient is NOT active.
-  //   2. Compute the total price based on the pizza state and show it in <strong>.
-  //
-  // Prices:
-  //   base (cheese pizza) -> $10
-  //   pepperoni           -> $1
-  //   mushrooms           -> $1
-  //   green peppers       -> $1
-  //   white sauce         -> $3
-  //   gluten-free crust   -> $5
+
+
+
 
   return (
     <aside className="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>
+        {pizza.pepperoni && <li>$1 pepperoni</li>} 
+        {pizza.mushrooms && <li>$1 mushrooms</li>} 
+        {pizza.greenPeppers && <li>$1 green peppers</li>}
+        {pizza.whiteSauce && <li>$3 white sauce</li>}
+        {pizza.glutenFreeCrust && <li>$5 gluten-free crust</li>}
       </ul>
-      <strong>$21</strong>
+      <strong>${calculatePrice(pizza)}</strong>
     </aside>
   )
 }

src/components/calculatePrice.jsx

@@ -0,0 +1,13 @@
+function calculatePrice(pizza) {
+  let total = 10;
+
+  if (pizza.pepperoni) total += 1;
+  if (pizza.mushrooms) total += 1;
+  if (pizza.greenPeppers) total += 1;
+  if (pizza.whiteSauce) total += 3;
+  if (pizza.glutenFreeCrust) total += 5;
+
+  return total;
+}
+
+export default calculatePrice;

src/components/ingredientButton.jsx

@@ -0,0 +1,13 @@
+function IngredientButton ({ active, className, onClick, children }) {
+    return (
+        <button
+            onClick={onClick}
+            className={`btn ${className} ${active ? 'active' : ''}`}
+            >
+            {children}
+        </button>
+
+    )
+}
+
+export default IngredientButton