Completed Lab

README.md

@@ -22,7 +22,7 @@ Edit multiple JavaScript files in this lab to refactor this app to have multiple
 
 1. Deploy this application to Netlify and add the link to your netlify site below:
 
-- [MY LIVE SITE URL]()
+- [MY LIVE SITE URL](https://sparkly-churros-d0f439.netlify.app/)
 
 #### Testing Tips
 

src/App.jsx

@@ -1,29 +1,84 @@
+import { useState } from "react";
 import Footer from "./Footer";
 import Header from "./Header";
+import menuItems from "./data" ;
+
 
 function App() {
-  return (
-    <div className="App">
-      <Header />
-      <main>
-        <aside>
-          <table></table>
-        </aside>
-        <section>
+const [currentOrder, setCurrentOrder]= useState([]);
+const [totalCost, setTotalCost] = useState(0);
+
+const renderSpiceLevel = (spiceLevel) => {
+  return '🌶️'.repeat(spiceLevel);
+}; 
+const addToOrder = (menuItem) => {
+  setCurrentOrder([...currentOrder, menuItem]);
+  setTotalCost(totalCost + menuItem.price);
+};
+const removeFromOrder = (menuItem) => {
+  setCurrentOrder(currentOrder.filter((item) => item.id !== menuItem.id));
+  setTotalCost(totalCost - menuItem.price);
+};
+const closeOrder = () => {
+  setCurrentOrder([]);
+  setTotalCost(0);
+};
+
+return (
+  <div className="App">
+    <Header />
+    <main>
+      <aside>
+        <table>
+          <thead>
+            <tr>
+              <th>Image</th>
+              <th>Name</th>
+              <th>Price</th>
+            </tr>
+          </thead>
+
+            {menuItems.map((menuItem) => (
+              <tr key={menuItem.id} onClick={() => addToOrder(menuItem)}>
+                <td>
+                  <span role="img" aria-label={menuItem.name}>
+                    {menuItem.image}
+                  </span>
+                </td>
+                <td className="item-name">
+                  <span>{menuItem.name}</span> <br />
+                  <span>{renderSpiceLevel(menuItem.spiceLevel)}</span>
+                </td>
+                <td>${menuItem.price}</td>
+              </tr>
+            ))}
+
+        </table>
+      </aside>
+      <section>
+        <div>
+          <h2>Current Order</h2>
+          <ul>
+            {currentOrder.map((menuItem) => (
+              <li key={menuItem.id}>
+                <span>{menuItem.name}</span> - ${menuItem.price}{' '}
+                <span role="img" aria-label={menuItem.name} onClick={() => removeFromOrder(menuItem)}>
+                  ❌
+                </span>
+              </li>
+            ))}
+          </ul>
+          <h4>Total: ${totalCost}</h4>
           <div>
-            <h2>Current Order</h2>
-            <ul></ul>
-            <h4>Total:</h4>
-            <div>
-              <button>Tidy order</button>
-              <button>Close order</button>
-            </div>
+            <button onClick={closeOrder}>Tidy order</button>
+            <button onClick={closeOrder}>Close order</button>
           </div>
-        </section>
-      </main>
-      <Footer />
-    </div>
-  );
+        </div>
+      </section>
+    </main>
+    <Footer />
+  </div>
+);
 }
 
-export default App;
+export default App;