app.js

const menu = [
  {
    id: 1,
    title: "Tteokbokki",
    category: "Korea",
    price: 10.99,
    img: "https://media.istockphoto.com/id/1253629795/tr/foto%C4%9Fraf/beton-masa-%C3%BCst%C3%BCnde-gri-kase-yumurta-ile-tteokbokki-tteok-bokki-pirin%C3%A7-kek-ile-kore.jpg?s=612x612&w=0&k=20&c=RvxL1fRABsfOvuVgqtTupwLxtqn12AgkaF3mzmXN3vE=",
    desc: `Spicy rice cakes, serving with fish cake.`,
  },
  {
    id: 2,
    title: "Chicken Ramen",
    category: "Japan",
    price: 7.99,
    img: "https://www.justonecookbook.com/wp-content/uploads/2022/08/Shio-Ramen-9526-I-2.jpg",
    desc: `Chicken noodle soup, serving with vegetables such as soy bean, green onion. In an optional you can ask for egg. `,
  },
  {
    id: 3,
    title: "Bibimbap",
    category: "Korea",
    price: 8.99,
    img: "https://dwellbymichelle.com/wp-content/uploads/2020/05/DWELL-bibimbap.jpg",
    desc: `Boiling vegetables, serving with special hot sauce`,
  },
  {
    id: 4,
    title: "Dan Dan Mian",
    category: "China",
    price: 5.99,
    img: "https://www.justonecookbook.com/wp-content/uploads/2020/08/Black-Sesame-Dan-Dan-Noodles-I-1.jpg",
    desc: `Dan dan noodle, serving with green onion `,
  },
  {
    id: 5,
    title: "Yangzhou Fried Rice",
    category: "China",
    price: 12.99,
    img: "https://salu-salo.com/wp-content/uploads/2013/02/Yangzhou-Fried-Rice1.jpg",
    desc: `Yangzhou style fried rice, serving with bean and pickles `,
  },
  {
    id: 6,
    title: "Onigiri",
    category: "Japan",
    price: 9.99,
    img: "https://www.manusmenu.com/wp-content/uploads/2017/08/Onigiri-3-1-of-1.jpg",
    desc: `Rice Sandwich, serving with soy sauce`,
  },
  {
    id: 7,
    title: "Jajangmyeon",
    category: "Korea",
    price: 15.99,
    img: "https://www.curiouscuisiniere.com/wp-content/uploads/2020/04/Jajangmyeon-Korean-Noodles-in-Black-Bean-Sauce5.1200H-720x540.jpg",
    desc: `Black bean sauce noodle, serving with green onion `,
  },
  {
    id: 8,
    title: "Ma Yi Shang Shu",
    category: "China",
    price: 12.99,
    img: "https://assets.tmecosys.com/image/upload/t_web767x639/img/recipe/ras/Assets/F688C2F6-86EC-46C4-B9C7-A6BA01DF7437/Derivates/32E3E72A-F786-406D-AF7F-B30980A9AC6C.jpg",
    desc: `Hot pepper sauce noodle, serving with soy bean and onion`,
  },
  {
    id: 9,
    title: "Doroyaki",
    category: "Japan",
    price: 3.99,
    img: "https://www.justonecookbook.com/wp-content/uploads/2011/10/Dorayaki-New-500x400.jpg",
    desc: `Red bean paste dessert, serving with honey.`,
  },
];
// Filter Buttons
const buttons = [
  { id: "all", text: "All" },
  { id: "korea", text: "Korea" },
  { id: "japan", text: "Japan" },
  { id: "china", text: "China" },
];

const container = document.querySelector(".btn-container");
container.innerHTML = buttons
  .map(
    (button) =>
      `<button id="${button.id}" class="btn btn-outline-dark btn-item">${button.text}</button>`
  )
  .join("");

// Declare the buttons
const allButton = document.querySelector("#all");
const koreaButton = document.querySelector("#korea");
const japanButton = document.querySelector("#japan");
const chinaButton = document.querySelector("#china");
const outputDiv = document.querySelector(".section-center");

// Display all items upon page load
showMenuItems("All");

// Implemented Event Listeners for Filter Buttons with Corresponding Categories"
allButton.addEventListener("click", function () {
  showMenuItems("All");
});
koreaButton.addEventListener("click", function () {
  showMenuItems("Korea");
});
japanButton.addEventListener("click", function () {
  showMenuItems("Japan");
});
chinaButton.addEventListener("click", function () {
  showMenuItems("China");
});

// Filter menu items based on the selected category
function showMenuItems(category) {
  const filteredMenu = // If the selected category is 'All', display all menu items; otherwise, filter by category
    category === "All"
      ? menu
      : menu.filter((item) => item.category === category);

  displayMenuItems(filteredMenu);
}

function displayMenuItems(menuItems) {
  outputDiv.innerHTML = menuItems
    .map(
      (item) => `
      <div class="menu-items col-lg-6 col-sm-12">
        <img
          src="${item.img}"
          alt="${item.title}"
          class="photo"
        />
        <div class="menu-info">
          <div class="menu-title">
            <h4>${item.title}</h4>
            <h4 class="price">${item.price}</h4>
          </div>
          <div class="menu-text">
            ${item.desc}
          </div>
        </div>
      </div>
    `
    )
    .join("");
}