ProjectRavel · ProjectRavel · Jun 21, 2024 · Jun 21, 2024
diff --git a/07-Menu/app.js b/07-Menu/app.js
@@ -0,0 +1,148 @@
+const menu = [
+    {
+      id: 1,
+      title: "buttermilk pancakes",
+      category: "breakfast",
+      price: 15.99,
+      img: "./images/item-1.jpeg",
+      desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
+    },
+    {
+      id: 2,
+      title: "diner double",
+      category: "lunch",
+      price: 13.99,
+      img: "./images/item-2.jpeg",
+      desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
+    },
+    {
+      id: 3,
+      title: "godzilla milkshake",
+      category: "shakes",
+      price: 6.99,
+      img: "./images/item-3.jpeg",
+      desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
+    },
+    {
+      id: 4,
+      title: "country delight",
+      category: "breakfast",
+      price: 20.99,
+      img: "./images/item-4.jpeg",
+      desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
+    },
+    {
+      id: 5,
+      title: "egg attack",
+      category: "lunch",
+      price: 22.99,
+      img: "./images/item-5.jpeg",
+      desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
+    },
+    {
+      id: 6,
+      title: "oreo dream",
+      category: "shakes",
+      price: 18.99,
+      img: "./images/item-6.jpeg",
+      desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
+    },
+    {
+      id: 7,
+      title: "bacon overflow",
+      category: "breakfast",
+      price: 8.99,
+      img: "./images/item-7.jpeg",
+      desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
+    },
+    {
+      id: 8,
+      title: "american classic",
+      category: "lunch",
+      price: 12.99,
+      img: "./images/item-8.jpeg",
+      desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut  `,
+    },
+    {
+      id: 9,
+      title: "quarantine buddy",
+      category: "shakes",
+      price: 16.99,
+      img: "./images/item-9.jpeg",
+      desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
+    },
+    {
+      id: 10,
+      title: "steak dinner",
+      category: "dinner",
+      price: 36.99,
+      img: "./images/item-10.jpeg",
+      desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
+    },
+  ];  
+
+
+
+
+const sectionCenter = document.querySelector('.section-center')
+const buttonContainer = document.querySelector('.btn-container')
+
+// Load Menu
+window.addEventListener('DOMContentLoaded', function(){
+  displayMenuItems(menu)
+  const categories = menu.reduce(function(values, item){
+    if(!values.includes(item.category)){
+      values.push(item.category)
+      }
+    return values
+  }, ['all'])
+
+  const categorybutton = categories.map(function(category){
+    return `<button type="button" class="filter-btn" data-id="${category}">${category}</button>`
+  }).join('');
+  buttonContainer.innerHTML = categorybutton
+  const filterBtns = buttonContainer.querySelectorAll('.filter-btn')
+  displayButtonFilter(filterBtns)
+})
+
+// Filter Items
+function displayButtonFilter(filterBtns){
+  filterBtns.forEach(function(btn){
+    btn.addEventListener('click', function(e){
+      const category = e.currentTarget.dataset.id
+      const menuCategory = menu.filter(function(menuItem){
+          if(menuItem.category == category){
+            return menuItem
+          }
+
+      });
+      // console.log(menuCategory)
+      if(category == 'all'){
+        displayMenuItems(menu)
+      }else{
+        displayMenuItems(menuCategory)
+      }
+    })
+  })
+}
+
+
+function displayMenuItems(items){
+    let displayMenu = items.map((item)=>{
+        return `<article class="menu-item">
+          <img src="${item.img}" alt="${item.title}" class="photo" />
+          <div class="item-info">
+            <header>
+              <h4>${item.title}</h4>
+              <h4 class="price">${item.price}</h4>
+            </header>
+            <p class="item-text">
+              ${item.desc}
+            </p>
+          </div>
+        </article>`
+
+    })
+    displayMenu = displayMenu.join("")
+    sectionCenter.innerHTML = displayMenu
+}
diff --git a/07-Menu/images/item-1.jpeg b/07-Menu/images/item-1.jpeg
diff --git a/07-Menu/images/item-10.jpeg b/07-Menu/images/item-10.jpeg
diff --git a/07-Menu/images/item-2.jpeg b/07-Menu/images/item-2.jpeg
diff --git a/07-Menu/images/item-3.jpeg b/07-Menu/images/item-3.jpeg
diff --git a/07-Menu/images/item-4.jpeg b/07-Menu/images/item-4.jpeg
diff --git a/07-Menu/images/item-5.jpeg b/07-Menu/images/item-5.jpeg
diff --git a/07-Menu/images/item-6.jpeg b/07-Menu/images/item-6.jpeg
diff --git a/07-Menu/images/item-7.jpeg b/07-Menu/images/item-7.jpeg
diff --git a/07-Menu/images/item-8.jpeg b/07-Menu/images/item-8.jpeg
diff --git a/07-Menu/images/item-9.jpeg b/07-Menu/images/item-9.jpeg
diff --git a/07-Menu/index.html b/07-Menu/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Menu</title>
+    <!-- font-awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+    />
+    <!-- styles -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <section class="menu">
+      <!-- title -->
+      <div class="title">
+        <h2>our menu</h2>
+        <div class="underline"></div>
+      </div>
+      <!-- filter buttons -->
+      <div class="btn-container">
+
+        <!-- <button type="button" class="filter-btn" data-id="all">all</button>
+
+        <button type="button" class="filter-btn" data-id="breakfast">
+          breakfast
+        </button>
+
+        <button type="button" class="filter-btn" data-id="lunch">lunch</button>
+        <button type="button" class="filter-btn" data-id="shakes">
+          shakes
+        </button> -->
+
+      </div>
+      <!-- menu items -->
+      <div class="section-center">
+        <!-- single item -->
+        <!-- <article class="menu-item">
+          <img src="./menu-item.jpeg" alt="menu item" class="photo" />
+          <div class="item-info">
+            <header>
+              <h4>buttermilk pancakes</h4>
+              <h4 class="price">$15</h4>
+            </header>
+            <p class="item-text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
+              laboriosam excepturi! Quo, officia.
+            </p>
+          </div>
+        </article> -->
+        <!-- end of single item --> 
+      </div>
+    </section>
+    <!-- javascript -->
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/07-Menu/menu-item.jpeg b/07-Menu/menu-item.jpeg