diff --git a/README.md b/README.md index dd6cc21..c120aa9 100644 --- a/README.md +++ b/README.md @@ -749,6 +749,23 @@ Answer these after completing the project: 5. What was the hardest part of the project? 6. What would you add next if this were a real restaurant website? +## Reflection Answers + +Use this section for your submission responses. + +1. How did JavaScript make your webpage interactive? + - +2. What did `querySelectorAll()` help you do? + - +3. What is the purpose of `addEventListener()`? + - +4. Why is storing menu data in objects and arrays useful? + - +5. What was the hardest part of the project? + - +6. What would you add next if this were a real restaurant website? + - + --- # Challenge for Later diff --git a/README2.md b/README2.md index 8a1577b..6359f19 100644 --- a/README2.md +++ b/README2.md @@ -414,6 +414,26 @@ Make them fully interactive using the same pattern. You are not memorizing code. You are learning how websites **respond to people**. + +--- + +# Reflection Answers (Safe Place) + +This section is for your lab reflection responses only. +It does not affect `index.html`, `style.css`, or `script.js`. + +1. How did JavaScript make your webpage interactive? + - JavaScript made my page interactive by listening for button clicks and then changing what shows on the screen. Instead of a fixed page, the menu updates when the user clicks a category. +2. What did `querySelectorAll()` help you do? + - `querySelectorAll()` helped me grab all the menu buttons at once. That made it easier to add click behavior to every button without writing separate code for each one. +3. What is the purpose of `addEventListener()`? + - `addEventListener()` tells JavaScript to wait for an action, like a click. When that action happens, it runs the function I wrote. +4. Why is storing menu data in objects and arrays useful? + - Storing menu data in objects and arrays keeps everything organized in one place. It also makes updates easier, because I can change data once instead of editing lots of HTML. +5. What was the hardest part of the project? + - The hardest part was understanding how the button `data-category` value connects to the correct section in `menuData`. Once I saw that match, the rest made more sense. +6. What would you add next if this were a real restaurant website? + - Next I would add real food photos, a contact/location section, and an online order button. I would also add a mobile-friendly reservation form. ```` --- diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 10.48.29\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 10.48.29\342\200\257PM.png" new file mode 100644 index 0000000..9005ef6 Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 10.48.29\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.00.46\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.00.46\342\200\257PM.png" new file mode 100644 index 0000000..01b06ce Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.00.46\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.16\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.16\342\200\257PM.png" new file mode 100644 index 0000000..32e52af Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.16\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.20\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.20\342\200\257PM.png" new file mode 100644 index 0000000..8e261ee Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.20\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.24\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.24\342\200\257PM.png" new file mode 100644 index 0000000..a331eb1 Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.24\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.27\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.27\342\200\257PM.png" new file mode 100644 index 0000000..de238cb Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.27\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.30\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.30\342\200\257PM.png" new file mode 100644 index 0000000..98c186c Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.30\342\200\257PM.png" differ diff --git "a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.32\342\200\257PM.png" "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.32\342\200\257PM.png" new file mode 100644 index 0000000..81f08b7 Binary files /dev/null and "b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.32\342\200\257PM.png" differ diff --git a/src/michaelmoss/images/ember-tide-hero.svg b/src/michaelmoss/images/ember-tide-hero.svg new file mode 100644 index 0000000..04ce741 --- /dev/null +++ b/src/michaelmoss/images/ember-tide-hero.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + BEACHSIDE & TIDES + \ No newline at end of file diff --git a/src/michaelmoss/index.html b/src/michaelmoss/index.html new file mode 100644 index 0000000..03ffdd9 --- /dev/null +++ b/src/michaelmoss/index.html @@ -0,0 +1,46 @@ + + + + + + Beachside and Tides + + + + + + +
+
+

Coastal Fire Kitchen

+

Beachside and Tides

+

Sun-drenched plates, open-air vibes, and coastal flavors that go all day.

+
+
+ Illustrated beachside patio for Beachside and Tides +
+
+ +
+ + + + + + + + + +
+ +
+ + + +
+ + + + \ No newline at end of file diff --git a/src/michaelmoss/script.js b/src/michaelmoss/script.js new file mode 100644 index 0000000..7e9f2c2 --- /dev/null +++ b/src/michaelmoss/script.js @@ -0,0 +1,267 @@ +const buttons = document.querySelectorAll(".menu-btn"); +const menuTitle = document.querySelector("#menu-title"); +const menuDisplay = document.querySelector("#menu-display"); +const menuMessage = document.querySelector("#menu-message"); + +const menuData = { + breakfast: [ + { + name: "Citrus Ricotta Toast", + description: "Charred sourdough with whipped ricotta, orange blossom honey, and pistachio.", + price: "$11", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Harbor Skillet", + description: "Roasted fingerlings, soft eggs, smoked tomato butter, and herbs.", + price: "$14", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Sea Salt Oatmeal", + description: "Steel-cut oats with grilled pear, toasted almond, and brown sugar cream.", + price: "$9", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + } + ], + lunch: [ + { + name: "Coal-Grilled Market Burger", + description: "Dry-aged beef, onion jam, provolone, and sea-salt fries.", + price: "$17", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Cedar Chicken Flatbread", + description: "Fire-roasted chicken, basil crema, blistered tomato, and arugula.", + price: "$15", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Garden Coast Bowl", + description: "Farro, roasted squash, fennel slaw, citrus vinaigrette, and herbs.", + price: "$13", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + } + ], + brunch: [ + { + name: "Lemon Souffle Pancakes", + description: "Cloud-soft pancakes with mascarpone cream and macerated berries.", + price: "$15", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Smoked Salmon Hash", + description: "Crisp potatoes, fennel, dill crema, poached eggs, and preserved lemon.", + price: "$18", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Spiced Tomato Shakshuka", + description: "Baked eggs in smoky pepper sauce with feta and grilled bread.", + price: "$14", + badge: "Spicy", + badgeClass: "badge-spicy" + } + ], + dinner: [ + { + name: "Oak-Fired Salmon", + description: "Crisp-skinned salmon with saffron rice, charred broccolini, and herb oil.", + price: "$27", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Midnight Braised Short Rib", + description: "Slow-braised rib over whipped potatoes with roasted shallot jus.", + price: "$31", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Ember Cauliflower Steak", + description: "Tahini glaze, ancient grains, blistered greens, and toasted seeds.", + price: "$24", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + } + ], + happyHour: [ + { + name: "Tide Sliders", + description: "Two wagyu sliders with sharp cheddar and pickled shallots.", + price: "$10", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Crispy Calamari Ribbons", + description: "Lemon aioli, sea salt, and charred pepper relish.", + price: "$11", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Blistered Shishitos", + description: "Flash-fried peppers finished with lime salt and smoked sesame.", + price: "$8", + badge: "Spicy", + badgeClass: "badge-spicy" + } + ], + drinks: [ + { + name: "Cinder Spritz", + description: "Blood orange, sparkling wine, and rosemary bitters.", + price: "$13", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Salted Vanilla Cold Brew", + description: "Velvet cold brew with vanilla bean cream and sea salt foam.", + price: "$7", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Minted Cucumber Fizz", + description: "Cucumber, lime, mint, and tonic over crushed ice.", + price: "$6", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + } + ], + desserts: [ + { + name: "Burnt Honey Cheesecake", + description: "Silky cheesecake with sea-salt caramel and citrus crumb.", + price: "$10", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Dark Cocoa Torte", + description: "Chocolate torte with espresso cream and candied orange.", + price: "$11", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + }, + { + name: "Roasted Peach Sundae", + description: "Vanilla gelato, oat crumble, and warm peach compote.", + price: "$9", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + } + ], + kidsMenu: [ + { + name: "Little Captain Grilled Cheese", + description: "Melted cheddar on buttery toast with a side of fruit.", + price: "$8", + badge: "Popular", + badgeClass: "badge-popular" + }, + { + name: "Mini Marinara Twirls", + description: "Tender pasta spirals with slow-cooked tomato sauce and parmesan.", + price: "$8", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + }, + { + name: "Crispy Chicken Bites", + description: "Golden chicken bites with roasted potatoes and honey mustard.", + price: "$9", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + } + ], + seasonalSpecials: [ + { + name: "Spring Pea Risotto", + description: "Creamy risotto with sweet peas, lemon zest, and shaved pecorino.", + price: "$22", + badge: "Vegetarian", + badgeClass: "badge-vegetarian" + }, + { + name: "Charred Shrimp Skewers", + description: "Paprika shrimp with grilled pineapple and chili-lime glaze.", + price: "$19", + badge: "Spicy", + badgeClass: "badge-spicy" + }, + { + name: "Firelight Lamb Chops", + description: "Herb-marinated lamb with minted yogurt and roasted carrots.", + price: "$34", + badge: "Chef's Choice", + badgeClass: "badge-chefs-choice" + } + ] +}; + +const categoryTitles = { + breakfast: "Breakfast Menu", + lunch: "Lunch Menu", + brunch: "Weekend Brunch Menu", + dinner: "Dinner Menu", + happyHour: "Happy Hour Menu", + drinks: "Drinks Menu", + desserts: "Desserts Menu", + kidsMenu: "Kids Menu", + seasonalSpecials: "Seasonal Specials" +}; + +const categoryMessages = { + brunch: "Available Saturdays and Sundays only.", + seasonalSpecials: "These limited-run plates change with the market and the tide." +}; + +function displayMenu(category) { + menuDisplay.innerHTML = ""; + + menuTitle.textContent = categoryTitles[category]; + menuMessage.textContent = categoryMessages[category] || ""; + + menuData[category].forEach(item => { + const menuItem = document.createElement("div"); + menuItem.classList.add("menu-item"); + + menuItem.innerHTML = ` +
+

${item.name}

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

${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); + }); +}); diff --git a/src/michaelmoss/style.css b/src/michaelmoss/style.css new file mode 100644 index 0000000..24a1dfa --- /dev/null +++ b/src/michaelmoss/style.css @@ -0,0 +1,318 @@ +:root { + --bg: #0f1a22; + --bg-soft: #162733; + --surface: rgba(247, 238, 224, 0.95); + --surface-strong: #fff8ed; + --text: #1c1b19; + --muted: #655d57; + --accent: #cb6b2f; + --accent-deep: #923f21; + --sea: #2d7c88; + --gold: #d9b15f; + --shadow: 0 20px 50px rgba(4, 13, 19, 0.24); + --radius-lg: 28px; + --radius-md: 18px; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Manrope", sans-serif; + background: + radial-gradient(circle at top, rgba(217, 177, 95, 0.18), transparent 30%), + linear-gradient(180deg, #152531 0%, #0f1a22 45%, #1e2c36 100%); + color: #f8f2e9; + line-height: 1.6; + padding: 24px; + min-height: 100vh; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); + background-size: 36px 36px; + opacity: 0.2; + pointer-events: none; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 85%); +} + +.hero, +.menu-section { + position: relative; + z-index: 1; + max-width: 1180px; + margin: 0 auto; +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); + gap: 28px; + align-items: center; + padding: 32px; + margin-bottom: 26px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + background: linear-gradient(135deg, rgba(255, 248, 237, 0.12), rgba(255, 248, 237, 0.04)); + box-shadow: var(--shadow); + backdrop-filter: blur(16px); + overflow: hidden; +} + +.hero::after { + content: ""; + position: absolute; + width: 220px; + height: 220px; + right: -60px; + top: -60px; + border-radius: 50%; + background: radial-gradient(circle, rgba(203, 107, 47, 0.45), transparent 70%); +} + +.eyebrow { + font-size: 0.78rem; + letter-spacing: 0.28em; + text-transform: uppercase; + color: #f1c783; + margin-bottom: 0.9rem; +} + +.hero h1, +#menu-title { + font-family: "Cormorant Garamond", serif; + letter-spacing: 0.02em; +} + +.hero h1 { + font-size: clamp(3rem, 6vw, 5.6rem); + line-height: 0.95; + margin-bottom: 1rem; + text-wrap: balance; +} + +.hero-tagline { + max-width: 34rem; + font-size: 1.06rem; + color: rgba(248, 242, 233, 0.82); +} + +.hero-visual img { + display: block; + width: 100%; + height: auto; + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.16); + box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25); + background: rgba(255, 255, 255, 0.08); +} + +.menu-controls { + position: relative; + z-index: 1; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; + max-width: 1180px; + margin: 0 auto 26px; +} + +.menu-btn { + padding: 0.9rem 1.15rem; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 248, 237, 0.08); + color: #fff5e6; + border-radius: 999px; + cursor: pointer; + font-size: 0.96rem; + font-weight: 700; + letter-spacing: 0.01em; + transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease; + backdrop-filter: blur(10px); +} + +.menu-btn:hover, +.menu-btn:focus-visible { + transform: translateY(-2px); + background-color: rgba(255, 248, 237, 0.18); + border-color: rgba(241, 199, 131, 0.5); + outline: none; +} + +.menu-btn.active { + background: linear-gradient(135deg, var(--gold), #f3d79b); + border-color: transparent; + color: #372616; + box-shadow: 0 10px 24px rgba(217, 177, 95, 0.22); +} + +.menu-section { + padding: 30px; + border-radius: var(--radius-lg); + background: linear-gradient(180deg, var(--surface) 0%, var(--surface-strong) 100%); + color: var(--text); + box-shadow: var(--shadow); + border: 1px solid rgba(255, 255, 255, 0.35); +} + +#menu-title { + font-size: clamp(2.3rem, 4vw, 3.4rem); + text-align: center; + margin-bottom: 0.4rem; + color: #221814; +} + +.menu-message { + min-height: 1.5rem; + text-align: center; + margin: 0 auto 1.5rem; + max-width: 42rem; + color: var(--accent-deep); + font-weight: 700; + letter-spacing: 0.01em; +} + +.menu-message:empty { + display: none; +} + +#menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 20px; +} + +.menu-item { + position: relative; + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 22px; + border-radius: var(--radius-md); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 239, 228, 0.96)); + border: 1px solid rgba(203, 107, 47, 0.14); + box-shadow: 0 14px 30px rgba(34, 24, 20, 0.08); + overflow: hidden; +} + +.menu-item::before { + content: ""; + position: absolute; + inset: auto -20% -55% auto; + width: 140px; + height: 140px; + border-radius: 50%; + background: radial-gradient(circle, rgba(45, 124, 136, 0.12), transparent 70%); + pointer-events: none; +} + +.menu-item h3 { + font-family: "Cormorant Garamond", serif; + font-size: 1.8rem; + line-height: 1; + color: #261912; + margin-right: 3rem; +} + +.menu-item p { + color: var(--muted); +} + +.menu-item-header { + display: flex; + justify-content: space-between; + gap: 0.75rem; + align-items: flex-start; +} + +.badge { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.3rem 0.65rem; + border-radius: 999px; + font-size: 0.72rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #fffaf2; + background: var(--accent); +} + +.badge-popular { + background: linear-gradient(135deg, #cb6b2f, #9f441f); +} + +.badge-spicy { + background: linear-gradient(135deg, #c53d20, #7f1710); +} + +.badge-vegetarian { + background: linear-gradient(135deg, #5f8d3e, #335b23); +} + +.badge-chefs-choice { + background: linear-gradient(135deg, #2d7c88, #1d5561); +} + +.price { + font-weight: 800; + color: var(--accent-deep); + font-size: 1.02rem; + margin-top: auto; +} + +@media (max-width: 860px) { + body { + padding: 16px; + } + + .hero { + grid-template-columns: 1fr; + padding: 24px; + } + + .hero h1 { + font-size: clamp(2.8rem, 15vw, 4.6rem); + } + + .menu-section { + padding: 22px; + } +} + +@media (prefers-reduced-motion: no-preference) { + .hero, + .menu-item, + .menu-btn { + animation: rise-in 500ms ease both; + } + + .menu-item:nth-child(2) { + animation-delay: 60ms; + } + + .menu-item:nth-child(3) { + animation-delay: 120ms; + } +} + +@keyframes rise-in { + from { + opacity: 0; + transform: translateY(12px); + } + + to { + opacity: 1; + transform: translateY(0); + } +}