code-differently · lnguyen135 · Apr 2, 2026
diff --git a/lannguyen/images/Banh khot.jpeg b/lannguyen/images/Banh khot.jpeg
diff --git a/lannguyen/images/Banh xeo.jpg b/lannguyen/images/Banh xeo.jpg
diff --git a/lannguyen/images/Beef & rice.avif b/lannguyen/images/Beef & rice.avif
diff --git a/lannguyen/images/Beef salad.jpeg b/lannguyen/images/Beef salad.jpeg
diff --git a/lannguyen/images/Canh chua.jpeg b/lannguyen/images/Canh chua.jpeg
diff --git a/lannguyen/images/Che ba mau.jpeg b/lannguyen/images/Che ba mau.jpeg
diff --git a/lannguyen/images/Claims especial.avif b/lannguyen/images/Claims especial.avif
diff --git a/lannguyen/images/Crep.jpeg b/lannguyen/images/Crep.jpeg
diff --git a/lannguyen/images/Egg rolls.avif b/lannguyen/images/Egg rolls.avif
diff --git a/lannguyen/images/Fruit bow.jpeg b/lannguyen/images/Fruit bow.jpeg
diff --git a/lannguyen/images/Fruit cocktail.avif b/lannguyen/images/Fruit cocktail.avif
diff --git a/lannguyen/images/Grilled Rice.avif b/lannguyen/images/Grilled Rice.avif
diff --git a/lannguyen/images/Hen wings.avif b/lannguyen/images/Hen wings.avif
diff --git a/lannguyen/images/Sunrise Bistro restaurant.png b/lannguyen/images/Sunrise Bistro restaurant.png
diff --git a/lannguyen/images/banh mi.webp b/lannguyen/images/banh mi.webp
diff --git a/lannguyen/images/cafe.webp b/lannguyen/images/cafe.webp
diff --git a/lannguyen/images/khoai lang.jpg b/lannguyen/images/khoai lang.jpg
diff --git a/lannguyen/images/pho bo.webp b/lannguyen/images/pho bo.webp
diff --git a/lannguyen/images/pho ga.webp b/lannguyen/images/pho ga.webp
diff --git a/lannguyen/images/salad bow.jpg b/lannguyen/images/salad bow.jpg
diff --git a/lannguyen/images/samon.jpg b/lannguyen/images/samon.jpg
diff --git a/lannguyen/images/sinh to.jpg b/lannguyen/images/sinh to.jpg
diff --git a/lannguyen/images/sping rolls.avif b/lannguyen/images/sping rolls.avif
diff --git a/lannguyen/images/vermicelli noodle salad.avif b/lannguyen/images/vermicelli noodle salad.avif
diff --git a/lannguyen/index.html b/lannguyen/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Interactive Restaurant Menu</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <section class="hero">
+  <h1>Homemade Vietnamese Restaurant</h1>
+  <p><strong>Fresh • Authentic • Made with love</strong></p>
+</section>
+
+  </header>
+
+  <section class="menu-controls">
+    <button class="menu-btn" data-category="breakfast">Breakfast</button>
+    <button class="menu-btn" data-category="lunch">Lunch</button>
+    <button class="menu-btn" data-category="brunch">Brunch</button>
+    <button class="menu-btn" data-category="dinner">Dinner</button>
+    <button class="menu-btn" data-category="happyHour">Happy Hour</button>
+    <button class="menu-btn" data-category="drinks">Drinks</button>
+  </section>
+
+
+
+  <main class="menu-section" >
+    <h2 id="menu-title">Menu</h2>
+    <div id="menu-display">
+      <p>Select a category to view menu items.</p>
+    </div>
+
+
+
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/lannguyen/script.js b/lannguyen/script.js
@@ -0,0 +1,255 @@
+
+
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+const menuData = {
+ breakfast: [
+    {
+      name: "Beef noodle soup",
+      description: "Beef noodle soup with fresh herbs",
+      price: "$18",
+      image: "./images/pho bo.webp"
+
+    },
+    {
+      name: "Chicken noodle soup",
+      description: "Chicken noodle soup with fresh herbs",
+      price: "$15",
+      image: "./images/pho ga.webp"
+    },
+    {
+      name: "Fruit Bowl",
+      description: "Fresh seasonal fruit served chilled",
+      price: "$8",
+      image: "./images/Fruit bow.jpeg"
+
+    }
+  ],
+
+
+  lunch: [
+    {
+      name: "Pork banh mi",
+      description: "Crispy baguette with pork & veggies",
+      price: "$12",
+      image: "./images/banh mi.webp"
+    },
+    {
+      name: "Egg rolls",
+      description: "Crispy rolls with dipping sauce",
+      price: "$11",
+      image: "./images/Egg rolls.avif"
+    },
+    {
+      name: "Hot & Sour Soup",
+      description: "Spicy soup with herbs",
+      price: "$17",
+      image: "./images/Canh chua.jpeg"
+    }
+  ],
+
+
+
+  brunch: [
+    {
+      name: "Crispy rice paper wrap",
+      description: "Crispy rice paper wrapped around seasoned meat and vegetables",
+      price: "$14",
+      image: "./images/Banh xeo.jpg"
+    },
+    {
+      name: "Avocado crepse",
+      description: "Toasted bread topped with avocado and eggs",
+      price: "$10",
+        image: "./images/Crep.jpeg"
+    },
+    {
+      name: "Brunch Special",
+      description: "Sparkling brunch favorite",
+      price: "$9",
+      image: "./images/Banh khot.jpeg"
+    }
+  ],
+  dinner: [
+    {
+      name: "Grilled Salmon",
+      description: "Salmon served with rice and vegetables",
+      price: "$28",
+      image: "./images/samon.jpg"
+    },
+
+    {
+      name: "Steak with vegetables",
+      description: "Sliced steak over mixed vegetables",
+      price: "$19",
+        image: "./images/Beef salad.jpeg"
+
+    },
+    {
+      name: "Veggie Bowl",
+      description: "Roasted vegetables over tufou with a savory sauce",
+      price: "$15",
+      image: "./images/vermicelli noodle salad.avif"
+
+    }
+  ],
+  happyHour: [
+    {
+      name: "Spring rolls",
+      description: "Crispy rolls filled with vegetables and served with dipping sauce",
+      price: "$6",
+        image: "./images/sping rolls.avif"
+    },
+    {
+      name: "Sweet Potato Fries",
+      description: "Fries topped with sinemon and coconutflakes",
+      price: "$7",
+        image: "./images/khoai lang.jpg"
+    },
+    {
+      name: " Salad bowl",
+      description: "Mixed salad with marinara sauce",
+      price: "$6",
+        image: "./images/salad bow.jpg"
+    }
+  ],
+  drinks: [
+    {
+      name: "Three color dessert",
+      description: "Three color dessert with beans, jelly, and coconut milk",
+      price: "$8",
+        image: "./images/Che ba mau.jpeg"
+    },
+    {
+      name: "Iced Coffee",
+      description: "Cold brew coffee over ice",
+      price: "$7",
+        image: "./images/cafe.webp"
+    },
+    {
+      name: "Berry Smoothie",
+      description: "Mixed berries blended with yogurt",
+      price: "$16",
+        image: "./images/sinh to.jpg"
+
+    }
+  ]
+};
+function displayMenu(category) {
+  menuDisplay.innerHTML = "";
+
+  const categoryTitles = {
+    breakfast: "Breakfast Menu",
+    lunch: "Lunch Menu",
+    brunch: "Brunch Menu",
+    dinner: "Dinner Menu",
+    happyHour: "Happy Hour Menu",
+    drinks: "Drinks Menu"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+  menuData[category].forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    menuItem.innerHTML = `
+      <h3>${item.name}</h3>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    menuDisplay.appendChild(menuItem);
+  });
+}
+
+displayMenu("breakfast");
+buttons[0].classList.add("active");
+
+buttons.forEach(button => {
+  button.addEventListener("click", function () {
+    buttons.forEach(btn => btn.classList.remove("active"));
+    button.classList.add("active");
+
+    const selectedCategory = button.dataset.category;
+    displayMenu(selectedCategory);
+  });
+});
+
+
+
+menuItem.innerHTML = `
+ <button onclick="addToCart('${item.name}')">Add</button>
+  <img src="${item.image}" alt="${item.name}" class="food-img">
+  <h3>${item.name}</h3>
+  <p>${item.description}</p>
+  <p class="price">${item.price}</p>
+  menuItem.innerHTML += `
+
+`;
+`;
+console.log(buttons);
+console.log(menuTitle);
+console.log(menuDisplay);
+
+ let cart = [];
+
+function addToCart(name) {
+  cart.push(name);
+  alert(name + " added to cart");
+} 
+
+function displayMenu(category) {
+  menuDisplay.innerHTML = "";
+
+  const categoryTitles = {
+    breakfast: "Breakfast Menu",
+    lunch: "Lunch Menu",
+    brunch: "Brunch Menu",
+    dinner: "Dinner Menu",
+    happyHour: "Happy Hour Menu",
+    drinks: "Drinks Menu"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+  menuData[category].forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    menuItem.innerHTML = `
+  <img src="${item.image}" class="food-img">
+  <h3>${item.name}</h3>
+  <p>${item.description}</p>
+  <p class="price">${item.price}</p>
+`;
+
+    menuDisplay.appendChild(menuItem);
+  });
+}
+
+
+
+displayMenu("breakfast");
+
+buttons.forEach(button => {
+  button.addEventListener("click", function () {
+    const selectedCategory = button.dataset.category;
+    displayMenu(selectedCategory);
+  });
+});
+
+buttons.forEach(button => {
+  button.addEventListener("click", function () {
+    buttons.forEach(btn => btn.classList.remove("active"));
+    button.classList.add("active");
+
+    const selectedCategory = button.dataset.category;
+    displayMenu(selectedCategory);
+  });
+});
+
+buttons[0].classList.add("active");
+