From 5b9458f265a8e83619939b0e5e9e9e16d4b81993 Mon Sep 17 00:00:00 2001 From: Jayden Andrews Date: Wed, 1 Apr 2026 14:24:43 -0400 Subject: [PATCH 1/3] Implemented interactive restaurant menu --- index.html | 33 ++++++++++++ script.js | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 91 +++++++++++++++++++++++++++++++ 3 files changed, 277 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9076e3a --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Interactive Restaurant Menu + + + +
+

Sunrise Bistro

+

Fresh food for every part of your day

+
+ + + +
+ + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..464dace --- /dev/null +++ b/script.js @@ -0,0 +1,153 @@ +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" + }, + { + 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" + }, + { + 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" + }, + { + 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" + }, + { + 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" + }, + { + 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" + } + ] +}; + +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 = ` +

${item.name}

+

${item.description}

+

${item.price}

+ `; + + 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/style.css b/style.css new file mode 100644 index 0000000..20ee9c5 --- /dev/null +++ b/style.css @@ -0,0 +1,91 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background-color: #fdf8f3; + color: #2d2d2d; + line-height: 1.6; + padding: 20px; +} + +.hero { + text-align: center; + margin-bottom: 30px; +} + +.hero h1 { + font-size: 2.5rem; + margin-bottom: 10px; +} + +.hero p { + font-size: 1.1rem; + color: #666; +} + +.menu-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.menu-btn { + padding: 12px 18px; + border: none; + background-color: #2d6a4f; + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; +} + +.menu-btn:hover { + background-color: #1b4332; +} + +.menu-btn.active { + background-color: #d97706; +} + +.menu-section { + max-width: 900px; + margin: 0 auto; +} + +#menu-title { + text-align: center; + margin-bottom: 20px; +} + +#menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} + +.menu-item { + background-color: white; + border-radius: 10px; + padding: 18px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); +} + +.menu-item h3 { + margin-bottom: 8px; +} + +.menu-item p { + margin-bottom: 10px; + color: #555; +} + +.price { + font-weight: bold; + color: #d97706; +} \ No newline at end of file From 6ced978a1ac11d2e6a6a781f9f5984df4e2509b2 Mon Sep 17 00:00:00 2001 From: Jayden Andrews Date: Wed, 1 Apr 2026 18:57:03 -0400 Subject: [PATCH 2/3] Added Krusty Krab Styling --- index.html | 100 +++++++++++++-- interactive-restaurant-menu.png | Bin 0 -> 83431 bytes script.js | 106 +++++++++------- style.css | 208 ++++++++++++++++++++++++++------ 4 files changed, 325 insertions(+), 89 deletions(-) create mode 100644 interactive-restaurant-menu.png diff --git a/index.html b/index.html index 9076e3a..01eb190 100644 --- a/index.html +++ b/index.html @@ -3,31 +3,111 @@ - Interactive Restaurant Menu + Krusty Krab Menu -
-

Sunrise Bistro

-

Fresh food for every part of your day

+ + + + +
+

Krusty Krab

+

Come spend your money here!

-