diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..8042f0c Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..b82e8fa Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/alien.jpg b/images/alien.jpg new file mode 100644 index 0000000..7bc0b9b Binary files /dev/null and b/images/alien.jpg differ diff --git a/images/drinkicon.png b/images/drinkicon.png new file mode 100644 index 0000000..62adcfa Binary files /dev/null and b/images/drinkicon.png differ diff --git a/images/food.png b/images/food.png new file mode 100644 index 0000000..7a056b4 Binary files /dev/null and b/images/food.png differ diff --git a/images/foodicon.png b/images/foodicon.png new file mode 100644 index 0000000..7220820 Binary files /dev/null and b/images/foodicon.png differ diff --git a/images/images.jpeg b/images/images.jpeg new file mode 100644 index 0000000..399324d Binary files /dev/null and b/images/images.jpeg differ diff --git a/images/spiderman.jpg b/images/spiderman.jpg new file mode 100644 index 0000000..ce37fd8 Binary files /dev/null and b/images/spiderman.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b37c2bc --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + Interactive Restaurant Menu + + + +
+

Alex Bistro

+

Don't matter what I say, you can't read this anyway

+
+ +
+ + + + + + + + + +
+ +
+ + +
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..70067a7 --- /dev/null +++ b/script.js @@ -0,0 +1,245 @@ +const buttons = document.querySelectorAll(".menu-btn"); +const menuTitle = document.querySelector("#menu-title"); +const menuDisplay = document.querySelector("#menu-display"); + +const menuData = { + breakfast: [ + { + name: "Pancake Stack", + description: "Fluffy pancakes served with maple syrup", + price: "$8", + badge: "popular", + badgeText: "Popular" + }, + { + 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", + badge: "vegetarian", + badgeText: "Vegetarian" + } + ], + + lunch: [ + { + name: "Classic Burger", + description: "Beef burger with fries", + price: "$12", + badge: "popular", + badgeText: "Popular" + }, + { + name: "Chicken Caesar Wrap", + description: "Grilled chicken, romaine, and Caesar dressing", + price: "$11" + }, + { + name: "Tomato Soup", + description: "Warm tomato soup with herbs", + price: "$7", + badge: "vegetarian", + badgeText: "Vegetarian" + } + ], + + brunch: [ + { + name: "Chicken & Waffles", + description: "Crispy chicken with Belgian waffles", + price: "$14", + badge: "chef-choice", + badgeText: "Chef's Choice" + }, + { + name: "Avocado Toast", + description: "Toasted bread topped with avocado and eggs", + price: "$10", + badge: "vegetarian", + badgeText: "Vegetarian" + }, + { + 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", + badge: "vegetarian", + badgeText: "Vegetarian" + } + ], + + 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" + } + ], + + desserts: [ + { + name: "Chocolate Cake", + description: "Rich chocolate cake with a soft center", + price: "$6", + badge: "popular", + badgeText: "Popular" + }, + { + name: "Cheesecake", + description: "Creamy cheesecake with strawberry topping", + price: "$7" + }, + { + name: "Ice Cream Sundae", + description: "Vanilla ice cream with syrup and whipped cream", + price: "$5" + } + ], + + kids: [ + { + name: "Mini Pancakes", + description: "Kid-sized pancake stack with syrup", + price: "$5", + badge: "popular", + badgeText: "Popular" + }, + { + name: "Grilled Cheese", + description: "Toasted sandwich with melted cheese", + price: "$6" + }, + { + name: "Chicken Tenders", + description: "Crispy tenders served with fries", + price: "$7" + } + ], + + seasonal: [ + { + name: "Pumpkin Waffles", + description: "Seasonal waffles with pumpkin spice flavor", + price: "$11", + badge: "chef-choice", + badgeText: "Chef's Choice" + }, + { + name: "Spicy Apple Cider", + description: "Warm cider with cinnamon and spice", + price: "$5", + badge: "spicy", + badgeText: "Spicy" + }, + { + name: "Harvest Bowl", + description: "Roasted vegetables, grains, and herb dressing", + price: "$12", + badge: "vegetarian", + badgeText: "Vegetarian" + } + ] +}; + +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", + desserts: "Desserts Menu", + kids: "Kids Menu", + seasonal: "Seasonal Specials" + }; + + if (category === "brunch") { + menuTitle.innerHTML = ` + Brunch Menu +

Available Saturdays and Sundays only

+ `; + } else { + menuTitle.textContent = categoryTitles[category]; + } + + menuData[category].forEach(item => { + const menuItem = document.createElement("div"); + menuItem.classList.add("menu-item"); + + menuItem.innerHTML = ` +

+ ${item.name} + ${item.badge ? `${item.badgeText}` : ""} +

+

${item.description}

+

${item.price}

+ `; + + 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); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..cb7019d --- /dev/null +++ b/style.css @@ -0,0 +1,167 @@ +main { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Wingdings, cursive, sans-serif; + background-color: #243de1; + color: #84df99; + 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: #3d46c5; +} + +.menu-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.menu-btn { + padding: 12px 18px; + border: none; + background-color: #1ac97a; + color: rgb(106, 21, 30); + border-radius: 8px; + cursor: pointer; + font-size: 1rem; +} + +.menu-btn:hover { + background-color: #1fb878; +} + +.menu-btn.active { + background-color: #dfca0f; +} + +.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: rgb(255, 255, 255); + border-radius: 10px; + padding: 18px; + box-shadow: 0 4px 10px rgba(180, 26, 126, 0.08); +} + +.menu-item h3 { + margin-bottom: 8px; +} + +.menu-item p { + margin-bottom: 10px; + color: #2f2681; +} + +.price { + font-weight: bold; + color: #d97706; +} +.badge { + display: inline-block; + margin-left: 6px; + padding: 2px 6px; + font-size: 0.7rem; + border-radius: 10px; + background: black; + color: white; +} + +.weekend-msg { + margin-top: 10px; + font-style: italic; +} + + + +/* style.css */ +* { + box-sizing: border-box; +} + +.menu-controls { + display: grid; + grid-template-columns: repeat(3, minmax(160px, 1fr)); + gap: 12px; + max-width: 1100px; + margin: 0 auto 30px; +} + +.menu-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + min-height: 72px; + padding: 12px 16px; + border: none; + background-color: #1ac97a; + color: rgb(106, 21, 30); + border-radius: 8px; + cursor: pointer; + font-size: 1rem; +} + +.menu-btn img { + width: 28px; + height: 28px; + object-fit: contain; +} + +.menu-btn:hover { + background-color: #1fb878; +} + +.menu-btn.active { + background-color: #dfca0f; +} + +img { + max-width: 100%; + height: auto; +} + +@media (max-width: 768px) { + .menu-controls { + grid-template-columns: repeat(2, minmax(140px, 1fr)); + } +} + +@media (max-width: 480px) { + .menu-controls { + grid-template-columns: 1fr; + } +} \ No newline at end of file