From bae14531e4036fd882c37a7b074127a9167ed3a2 Mon Sep 17 00:00:00 2001
From: Tonesha Rose <131703989+tonesharose31@users.noreply.github.com>
Date: Tue, 1 Aug 2023 15:42:17 -0400
Subject: [PATCH 1/2] editing and updating lab

---
 src/App.jsx | 97 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 76 insertions(+), 21 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0218d5b..92c3965 100644
--- a/src/App.jsx
+++ b/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;
\ No newline at end of file

From 7e5e01c0717f2ddb3a947cb1d5b022acc1c17653 Mon Sep 17 00:00:00 2001
From: Tonesha Rose <131703989+tonesharose31@users.noreply.github.com>
Date: Wed, 2 Aug 2023 01:55:16 -0400
Subject: [PATCH 2/2] added live URL site

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3b51cb1..7260ca3 100644
--- a/README.md
+++ b/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