code-differently · michael77737 · Apr 2, 2026
diff --git 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
@@ -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 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 10.48.29 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.00.46 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.00.46 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.16 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.16 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.20 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.20 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.24 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.24 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.27 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.27 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.30 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.30 PM.png
diff --git a/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.32 PM.png b/src/michaelmoss/images/Screenshot 2026-04-01 at 11.38.32 PM.png
diff --git a/src/michaelmoss/images/ember-tide-hero.svg b/src/michaelmoss/images/ember-tide-hero.svg
diff --git a/src/michaelmoss/index.html b/src/michaelmoss/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Beachside and Tides</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Cormorant+Garamond:wght@600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-copy">
+      <p class="eyebrow">Coastal Fire Kitchen</p>
+      <h1>Beachside and Tides</h1>
+      <p class="hero-tagline">Sun-drenched plates, open-air vibes, and coastal flavors that go all day.</p>
+    </div>
+    <div class="hero-visual">
+      <img src="images/ember-tide-hero.svg" alt="Illustrated beachside patio for Beachside and Tides" />
+    </div>
+  </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="desserts">Desserts</button>
+    <button class="menu-btn" data-category="kidsMenu">Kids Menu</button>
+    <button class="menu-btn" data-category="seasonalSpecials">Seasonal Specials</button>
+  </section>
+
+  <main class="menu-section">
+    <h2 id="menu-title">Menu</h2>
+    <p id="menu-message" class="menu-message" aria-live="polite"></p>
+    <div id="menu-display">
+      <p>Select a category to view menu items.</p>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>