code-differently · hriverson261 · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026
diff --git a/henrriettariverson/images/restuarant.png b/henrriettariverson/images/restuarant.png
diff --git a/henrriettariverson/images/sunbistro.png b/henrriettariverson/images/sunbistro.png
diff --git a/henrriettariverson/index.html b/henrriettariverson/index.html
@@ -0,0 +1,43 @@
+<!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">
+
+    <img src="images/restuarant.png" alt="Restaurant food" class="hero-img">
+
+    <h1>Sunset Bistro</h1>
+    <p>Serving Flavor from Sunrise to Sunset</p>
+
+  </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>
+     <button class="menu-btn" data-category="kids">Kids</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/henrriettariverson/script.js b/henrriettariverson/script.js
@@ -0,0 +1,206 @@
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+console.log(buttons);
+console.log(menuTitle);
+console.log(menuDisplay);
+
+const menuData = {
+  breakfast: [
+    {
+      name: "Pancake Stack",
+      description: "Fluffy pancakes served with maple syrup",
+      price: "$8",
+      popular: true
+    },
+    {
+      name: "Egg & Cheese Sandwich",
+      description: "Scrambled eggs and cheese on a toasted roll",
+      price: "$7"
+    },
+    {
+      name: "Fruit Bowl",
+      description: "Fresh seasonal fruit served chilled",
+      price: "$6"
+    }
+  ],
+
+  lunch: [
+    {
+      name: "Classic Burger",
+      description: "Beef burger with fries",
+      price: "$12",
+      popular: true
+    },
+    {
+      name: "Chicken Caesar Wrap",
+      description: "Grilled chicken, romaine, and Caesar dressing",
+      price: "$11"
+    },
+    {
+      name: "Tomato Soup",
+      description: "Warm tomato soup with herbs",
+      price: "$7"
+    }
+  ],
+
+  brunch: [
+    {
+      name: "Chicken & Waffles",
+      description: "Crispy chicken with Belgian waffles",
+      price: "$14",
+      popular: true
+    },
+    {
+      name: "Avocado Toast",
+      description: "Toasted bread topped with avocado and eggs",
+      price: "$10"
+    },
+    {
+      name: "Brunch Mimosa",
+      description: "Sparkling brunch favorite",
+      price: "$9"
+    }
+  ],
+
+  dinner: [
+    {
+      name: "Grilled Salmon",
+      description: "Salmon served with rice and vegetables",
+      price: "$18"
+    },
+    {
+      name: "Steak Pasta",
+      description: "Sliced steak over creamy pasta",
+      price: "$19",
+      popular: true
+    },
+    {
+      name: "Veggie Bowl",
+      description: "Roasted vegetables over quinoa",
+      price: "$15"
+    }
+  ],
+
+  happyHour: [
+    {
+      name: "Mini Sliders",
+      description: "Three mini burgers",
+      price: "$6"
+    },
+    {
+      name: "Loaded Fries",
+      description: "Fries topped with cheese and bacon",
+      price: "$7",
+      popular: true
+    },
+    {
+      name: "Mozzarella Sticks",
+      description: "Crispy sticks with marinara sauce",
+      price: "$6"
+    }
+  ],
+
+  drinks: [
+    {
+      name: "Fresh Lemonade",
+      description: "Cold lemonade made fresh daily",
+      price: "$4"
+    },
+    {
+      name: "Iced Coffee",
+      description: "Cold brew coffee over ice",
+      price: "$5"
+    },
+    {
+      name: "Berry Smoothie",
+      description: "Mixed berries blended with yogurt",
+      price: "$6",
+      popular: true
+    }
+  ],
+
+  kids: [
+    {
+      name: "Kids Cheeseburger",
+      description: "Small cheeseburger with fries",
+      price: "$6"
+    },
+    {
+      name: "Chicken Tenders",
+      description: "Crispy chicken tenders with dipping sauce",
+      price: "$6",
+      popular: true
+    },
+    {
+      name: "Grilled Cheese",
+      description: "Classic grilled cheese sandwich",
+      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",
+    kids: "Kids Menu"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+
+  if (category === "brunch") {
+
+    const brunchMessage = document.createElement("p");
+    brunchMessage.textContent = "Available Saturdays and Sundays only";
+    brunchMessage.style.textAlign = "center";
+    brunchMessage.style.marginBottom = "20px";
+    brunchMessage.style.fontWeight = "bold";
+
+    menuDisplay.appendChild(brunchMessage);
+
+  }
+
+  menuData[category].forEach(item => {
+
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    /* Creating the Popular badge */
+    const popularLabel = item.popular ? "<span class='badge'>⭐ Popular</span>" : "";
+
+    menuItem.innerHTML = `
+      <h3>${item.name} ${popularLabel}</h3>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    menuDisplay.appendChild(menuItem);
+
+  });
+}
+
+displayMenu("breakfast");
+
+
+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);
+
+  });
+});
diff --git a/henrriettariverson/style.css b/henrriettariverson/style.css
@@ -0,0 +1,110 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background: linear-gradient(to bottom, #ff7e5f, #feb47b, #fd5e9c, #6a4c93);
+  color: #fff5f0;
+  line-height: 1.6;
+  padding: 20px;
+}
+
+/* HERO SECTION */
+
+.hero {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+/* HERO IMAGE */
+
+.hero-img {
+  width: 100%;
+  max-height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  color: #000000;
+}
+
+.hero p {
+  font-size: 1.1rem;
+  color: #000000;
+}
+
+/* MENU BUTTONS */
+
+.menu-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.menu-btn {
+  padding: 12px 18px;
+  border: none;
+  background-color: #ff6f61; 
+  color: rgb(13, 13, 13);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.menu-btn:hover {
+  background-color: #ff9a5a; 
+}
+
+.menu-btn.active {
+  background-color: #6a4c93;
+}
+
+/* MENU SECTION */
+
+.menu-section {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+#menu-title {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #000000;
+}
+
+#menu-display {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.menu-item {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 18px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  color: #3a1f2d;
+}
+
+.menu-item h3 {
+  margin-bottom: 8px;
+}
+
+.menu-item p {
+  margin-bottom: 10px;
+  color: #5c3a42;
+}
+
+.price {
+  font-weight: bold;
+  color: #ff6f3c; 
+}