code-differently · Mesheik · Apr 2, 2026 · Apr 2, 2026
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Interactive-restaurant-menu/.DS_Store b/Interactive-restaurant-menu/.DS_Store
diff --git a/Interactive-restaurant-menu/Images/.DS_Store b/Interactive-restaurant-menu/Images/.DS_Store
diff --git a/Interactive-restaurant-menu/Images/Brunch Sampler.jpg b/Interactive-restaurant-menu/Images/Brunch Sampler.jpg
diff --git a/Interactive-restaurant-menu/Images/California Roll Combo.jpg b/Interactive-restaurant-menu/Images/California Roll Combo.jpg
diff --git a/Interactive-restaurant-menu/Images/Miso Soup & Onigiri Set.jpg b/Interactive-restaurant-menu/Images/Miso Soup & Onigiri Set.jpg
diff --git a/Interactive-restaurant-menu/Images/Smoked Salmon Rice Bowl.jpg b/Interactive-restaurant-menu/Images/Smoked Salmon Rice Bowl.jpg
diff --git a/Interactive-restaurant-menu/Images/Spicy Tuna Bento.jpg b/Interactive-restaurant-menu/Images/Spicy Tuna Bento.jpg
diff --git a/Interactive-restaurant-menu/Images/Tamago Morning Roll.jpg b/Interactive-restaurant-menu/Images/Tamago Morning Roll.jpg
diff --git a/Interactive-restaurant-menu/Images/Teriyaki Chicken Bowl.jpg b/Interactive-restaurant-menu/Images/Teriyaki Chicken Bowl.jpg
diff --git a/Interactive-restaurant-menu/Images/hero-sushi.jpg b/Interactive-restaurant-menu/Images/hero-sushi.jpg
diff --git a/Interactive-restaurant-menu/Images/hero-sushiii.jpg b/Interactive-restaurant-menu/Images/hero-sushiii.jpg
diff --git a/Interactive-restaurant-menu/index.html b/Interactive-restaurant-menu/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sheik's Sakura Tide</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="page-glow glow-1"></div>
+  <div class="page-glow glow-2"></div>
+
+  <header class="hero">
+    <div class="hero-overlay"></div>
+    <div class="hero-content">
+      <p class="eyebrow">Japanese Fusion • Sushi • Brunch • Drinks</p>
+      <h1>Sheik's Tokyo Table</h1>
+      <p class="hero-text">
+        Fresh rolls, warm bites, and smooth drinks served in a modern Japanese-inspired dining experience.
+      </p>
+    </div>
+  </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">
+    <div class="section-heading">
+      <p class="section-tag">Today's Selections</p>
+      <h2 id="menu-title">Menu</h2>
+    </div>
+
+    <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/Interactive-restaurant-menu/script.js b/Interactive-restaurant-menu/script.js
@@ -0,0 +1,150 @@
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+const menuData = {
+  breakfast: [
+    {
+      name: "Tamago Morning Roll",
+      description: "Sweet egg roll with avocado and cucumber for a light morning start.",
+      price: "$8"
+    },
+    {
+      name: "Smoked Salmon Rice Bowl",
+      description: "Steamed rice topped with smoked salmon and pickled vegetables.",
+      price: "$10"
+    },
+    {
+      name: "Miso Soup & Onigiri Set",
+      description: "Warm miso soup served with two salmon rice balls.",
+      price: "$9"
+    }
+  ],
+  lunch: [
+    {
+      name: "California Roll Combo",
+      description: "Classic California roll served with seaweed salad.",
+      price: "$12"
+    },
+    {
+      name: "Spicy Tuna Bento",
+      description: "Spicy tuna roll with rice, dumplings, and cucumber salad.",
+      price: "$14"
+    },
+    {
+      name: "Teriyaki Chicken Bowl",
+      description: "Grilled chicken over rice with teriyaki glaze.",
+      price: "$13"
+    }
+  ],
+  brunch: [
+    {
+      name: "Sakura Brunch Sampler",
+      description: "Assorted sushi, tamago, fruit, and green tea.",
+      price: "$16"
+    },
+    {
+      name: "Avocado Crab Toast",
+      description: "Toasted bread topped with crab mix, avocado, and sesame.",
+      price: "$11"
+    },
+    {
+      name: "Matcha Pancake Bites",
+      description: "Mini fluffy pancakes topped with matcha cream.",
+      price: "$10"
+    }
+  ],
+  dinner: [
+    {
+      name: "Chef's Omakase Plate",
+      description: "A premium selection of sushi and sashimi chosen by the chef.",
+      price: "$28"
+    },
+    {
+      name: "Dragon Roll Deluxe",
+      description: "Eel, crab, avocado, and eel sauce over a crispy roll.",
+      price: "$19"
+    },
+    {
+      name: "Salmon Hibachi Plate",
+      description: "Grilled salmon with fried rice and stir-fried vegetables.",
+      price: "$22"
+    }
+  ],
+  happyHour: [
+    {
+      name: "Crunchy Shrimp Roll",
+      description: "Crispy shrimp roll served in happy hour portions.",
+      price: "$7"
+    },
+    {
+      name: "Gyoza Bites",
+      description: "Pan-seared dumplings with soy dipping sauce.",
+      price: "$6"
+    },
+    {
+      name: "Spicy Edamame",
+      description: "Steamed edamame tossed in garlic chili sauce.",
+      price: "$5"
+    }
+  ],
+  drinks: [
+    {
+      name: "Lychee Sparkler",
+      description: "Chilled lychee soda with citrus and mint.",
+      price: "$5"
+    },
+    {
+      name: "Iced Matcha Latte",
+      description: "Smooth iced matcha with creamy milk.",
+      price: "$6"
+    },
+    {
+      name: "Yuzu Lemon Tea",
+      description: "Refreshing citrus tea served over ice.",
+      price: "$5"
+    }
+  ]
+};
+
+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 = `
+  <div class="menu-image"></div>
+  <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);
+  });
+});