Merge 075f199 into a2e82d5

akhilome · Oct 14, 2018 · 082a193 · 082a193
2 parents a2e82d5 + 075f199
commit 082a193
Show file tree

Hide file tree

Showing 14 changed files with 432 additions and 248 deletions.
diff --git a/ui/add-food.html b/ui/add-food.html
@@ -17,7 +17,7 @@ <h2><a href="index.html">Kiakia Food</a></h2>
       <a href="#" class="nav-mobile">☰ menu</a>
       <ul>
         <li><a href="orders.html">All Orders</a></li>
-        <li><a href="menu.html">All Food Items</a></li>
+        <li><a href="admin-menu.html">All Food Items</a></li>
         <li><a href="#">Log Out</a></li>
       </ul>
     </nav>
@@ -28,6 +28,7 @@ <h2><a href="index.html">Kiakia Food</a></h2>
       <h2>Add New Food Item</h2>
       <form>
         <input type="text" name="food-item" placeholder="Food Name" required>
+        <input type="text" name="food-image" placeholder="Food Image URL">
         <input type="number" name="food-price" placeholder="Price" required>
         <input type="submit" name="submit" value="Add" class="btn-primary">
       </form>

diff --git a/ui/admin-menu.html b/ui/admin-menu.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link href="https://fonts.googleapis.com/css?family=Comfortaa|Open+Sans" rel="stylesheet">
+  <link rel="stylesheet" href="assets/main.css">
+  <title>Food Menu</title>
+</head>
+<body>
+  <header>
+    <div class="site-title">
+      <h2><a href="index.html">Kiakia Food</a></h2>
+    </div>
+    <nav>
+      <a href="#" class="nav-mobile">☰ menu</a>
+      <ul>
+        <li><a href="orders.html">All Orders</a></li>
+        <li><a href="index.html">Log out</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <div class="wrapper">
+    <h2>Your Offerings</h2>
+    <section class="container admin-menu">
+      <div class="food-card">
+        <img class="food-image" src="https://i.imgur.com/Bfn1CxC.jpg" alt="Turkey Wings">
+        <div class="food-details">
+          <div data-foodid="2" class="food-details__legend">
+            <h4>Turkey Wings</h4>
+            <p>₦1,000</p>
+          </div>
+          <div class="food-details__action">
+            <button>delete</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="food-card">
+        <img class="food-image" src="https://i.imgur.com/z490cis.jpg" alt="Chicken Wings">
+        <div class="food-details">
+          <div data-foodid="3" class="food-details__legend">
+            <h4>Chicken Wings</h4>
+            <p>₦1,200</p>
+          </div>
+          <div class="food-details__action">
+            <button>delete</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="food-card">
+        <img class="food-image" src="https://i.imgur.com/mTHYwlc.jpg" alt="Tasty Prawns">
+        <div class="food-details">
+          <div data-foodid="4" class="food-details__legend">
+            <h4>Tasty Prawns</h4>
+            <p>₦2,200</p>
+          </div>
+          <div class="food-details__action">
+            <button>delete</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <a href="add-food.html"><button class="btn-primary">Add New Item</button></a>
+  </div>
+
+  <footer>
+    <div class="footer-left">
+      <p>kiakia food</p>
+    </div>
+    <div class="footer-right">
+      <p>&copy; 2018</p>
+    </div>
+  </footer>
+
+  <script src="assets/main.js"></script>
+</body>
+</html>
diff --git a/ui/assets/js/cart.js b/ui/assets/js/cart.js
@@ -0,0 +1,25 @@
+// Get all buttons
+const buyButtons = document.querySelectorAll('.food-details__action > button');
+
+function addToCart() {
+  if(!localStorage.getItem('cart')) localStorage.setItem('cart', '{}');
+  const cart = JSON.parse(localStorage.getItem('cart'));
+  const foodDetails = this.parentNode.previousElementSibling;
+  const foodImage = foodDetails.parentNode.previousElementSibling.src;
+  const foodId = foodDetails.dataset.foodid
+  const foodName = foodDetails.querySelector('h4').innerText;
+  const foodPrice = foodDetails.querySelector('p').innerText;
+
+  if(!cart.hasOwnProperty(foodId)) {
+    cart[foodId] = { foodName, foodPrice, foodImage }
+  } else {
+    return flashMessage('Item already in cart', 'error');
+  }
+
+  localStorage.setItem('cart', JSON.stringify(cart));
+  flashMessage('Item added to cart', 'success');
+}
+
+
+// Event Listeners
+buyButtons.forEach(button => button.addEventListener('click', addToCart));
diff --git a/ui/assets/js/checkout.js b/ui/assets/js/checkout.js
@@ -0,0 +1,41 @@
+function checkoutCardBlueprint(id, foodName, foodPrice) {
+  return `
+  <div data-foodid=${id} class="food-card-checkout">
+    <div class="food-card-checkout__details">
+      <h4>${foodName}</h4>
+      <p>${foodPrice}</p>
+    </div>
+    <button>Remove</button>
+  </div>
+  `;
+}
+
+// Populate Cart Items on Page Load
+(() => {
+  const cartItems = JSON.parse(localStorage.getItem('cart'));
+  if(!Object.keys(cartItems).length) {
+    document.querySelector('#checkout').remove();
+    return document.querySelector('section.checkout').innerHTML = '<div>No items in cart!</div>';
+  }
+
+  const formatted = [];
+  for (const food in cartItems) {
+    formatted.push(checkoutCardBlueprint(food, cartItems[food].foodName, cartItems[food].foodPrice));
+  }
+  document.querySelector('section.checkout').innerHTML = formatted.join('');
+})();
+
+//
+const removeButtons = document.querySelectorAll('.food-card-checkout > button')
+
+function removeFromCart() {
+  const cart = JSON.parse(localStorage.getItem('cart'));
+  const foodCard = this.parentNode;
+  const foodId = foodCard.dataset.foodid;
+  delete cart[foodId];
+
+  localStorage.setItem('cart', JSON.stringify(cart));
+  foodCard.remove();
+}
+
+removeButtons.forEach(button => button.addEventListener('click', removeFromCart));