Skip to content

Complete #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kedelin261 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Complete #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions Restaurant/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!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>
<div class="overlay">
<header class="hero">
<h1>Coffee & Vibes</h1>
<p class="tagline">Vibes for every part of your day</p>
</header>

<main class="menu-container">
<h2 id="menu-title">Choose a Menu Category</h2>

<div class="button-container">
<button id="breakfast-btn">Breakfast</button>
<button id="lunch-btn">Lunch</button>
<button id="brunch-btn">Brunch</button>
<button id="dinner-btn">Dinner</button>
<button id="happyhour-btn">Happy Hour</button>
<button id="drinks-btn">Drinks</button>
</div>

<section id="menu-display" class="menu-display">
<div class="welcome-card">
<h3>Welcome to Coffee & Vibes</h3>
<p>Click a menu button to see delicious options.</p>
</div>
</section>
</main>

<section class="beach-scene">
<div class="sun"></div>

<div class="bird bird-one"></div>
<div class="bird bird-two"></div>
<div class="bird bird-three"></div>

<div class="palm-tree palm-left">
<div class="trunk"></div>
<div class="leaves">
<span class="leaf leaf1"></span>
<span class="leaf leaf2"></span>
<span class="leaf leaf3"></span>
<span class="leaf leaf4"></span>
<span class="leaf leaf5"></span>
</div>
</div>

<div class="palm-tree palm-right">
<div class="trunk"></div>
<div class="leaves">
<span class="leaf leaf1"></span>
<span class="leaf leaf2"></span>
<span class="leaf leaf3"></span>
<span class="leaf leaf4"></span>
<span class="leaf leaf5"></span>
</div>
</div>

<div class="ocean"></div>
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="sand"></div>
</section>
</div>

<script src="script.js"></script>
</body>
</html>
146 changes: 146 additions & 0 deletions Restaurant/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
const breakfastButton = document.querySelector("#breakfast-btn");
const lunchButton = document.querySelector("#lunch-btn");
const brunchButton = document.querySelector("#brunch-btn");
const dinnerButton = document.querySelector("#dinner-btn");
const happyHourButton = document.querySelector("#happyhour-btn");
const drinksButton = document.querySelector("#drinks-btn");

const menuTitle = document.querySelector("#menu-title");
const menuDisplay = document.querySelector("#menu-display");

function updateMenu(title, items) {
menuTitle.textContent = title;
menuDisplay.innerHTML = items;
}

const breakfastItems = `
<div class="menu-card">
<h3>Pancake Stack</h3>
<p>Fluffy pancakes served with syrup and fresh berries.</p>
<span class="price">$8.99</span>
</div>
<div class="menu-card">
<h3>Eggs & Bacon</h3>
<p>Scrambled eggs, crispy bacon, and buttered toast.</p>
<span class="price">$9.49</span>
</div>
<div class="menu-card">
<h3>French Toast</h3>
<p>Golden toast with cinnamon sugar and powdered topping.</p>
<span class="price">$7.99</span>
</div>
`;

const lunchItems = `
<div class="menu-card">
<h3>Classic Burger</h3>
<p>Juicy beef patty with lettuce, tomato, and fries.</p>
<span class="price">$12.99</span>
</div>
<div class="menu-card">
<h3>Chicken Caesar Wrap</h3>
<p>Grilled chicken, romaine, parmesan, and Caesar dressing.</p>
<span class="price">$10.99</span>
</div>
<div class="menu-card">
<h3>Garden Salad</h3>
<p>Fresh greens, cucumbers, tomatoes, and house vinaigrette.</p>
<span class="price">$8.49</span>
</div>
`;

const brunchItems = `
<div class="menu-card">
<h3>Avocado Toast</h3>
<p>Toasted sourdough topped with avocado and poached eggs.</p>
<span class="price">$11.49</span>
</div>
<div class="menu-card">
<h3>Brunch Platter</h3>
<p>Waffles, eggs, sausage, and seasonal fruit.</p>
<span class="price">$13.99</span>
</div>
<div class="menu-card">
<h3>Breakfast Burrito</h3>
<p>Loaded with eggs, cheese, peppers, and potatoes.</p>
<span class="price">$10.49</span>
</div>
`;

const dinnerItems = `
<div class="menu-card">
<h3>Grilled Salmon</h3>
<p>Served with garlic mashed potatoes and vegetables.</p>
<span class="price">$18.99</span>
</div>
<div class="menu-card">
<h3>Steak Plate</h3>
<p>Tender steak cooked to order with rice and asparagus.</p>
<span class="price">$22.99</span>
</div>
<div class="menu-card">
<h3>Pasta Primavera</h3>
<p>Pasta tossed with fresh vegetables in a light cream sauce.</p>
<span class="price">$15.99</span>
</div>
`;

const happyHourItems = `
<div class="menu-card">
<h3>Mini Sliders</h3>
<p>Three cheeseburger sliders with special sauce.</p>
<span class="price">$6.99</span>
</div>
<div class="menu-card">
<h3>Mozzarella Sticks</h3>
<p>Crispy golden sticks served with marinara sauce.</p>
<span class="price">$5.99</span>
</div>
<div class="menu-card">
<h3>Loaded Nachos</h3>
<p>Tortilla chips topped with cheese, jalapeños, and salsa.</p>
<span class="price">$7.49</span>
</div>
`;

const drinksItems = `
<div class="menu-card">
<h3>Tropical Smoothie</h3>
<p>A refreshing blend of mango, pineapple, and orange.</p>
<span class="price">$4.99</span>
</div>
<div class="menu-card">
<h3>Iced Coffee</h3>
<p>Chilled coffee with cream and sweet flavor options.</p>
<span class="price">$3.99</span>
</div>
<div class="menu-card">
<h3>Berry Lemonade</h3>
<p>Fresh lemonade mixed with strawberry and blueberry flavors.</p>
<span class="price">$4.49</span>
</div>
`;

breakfastButton.addEventListener("click", function () {
updateMenu("Breakfast Menu", breakfastItems);
});

lunchButton.addEventListener("click", function () {
updateMenu("Lunch Menu", lunchItems);
});

brunchButton.addEventListener("click", function () {
updateMenu("Brunch Menu", brunchItems);
});

dinnerButton.addEventListener("click", function () {
updateMenu("Dinner Menu", dinnerItems);
});

happyHourButton.addEventListener("click", function () {
updateMenu("Happy Hour Menu", happyHourItems);
});

drinksButton.addEventListener("click", function () {
updateMenu("Drinks Menu", drinksItems);
});
Loading