code-differently · cfscott261-cell · Apr 2, 2026 · Apr 2, 2026
diff --git a/coreyscott/images/Screenshot 2026-04-01 at 10.33.20 PM.png b/coreyscott/images/Screenshot 2026-04-01 at 10.33.20 PM.png
diff --git a/coreyscott/images/taco-bg.png b/coreyscott/images/taco-bg.png
diff --git a/coreyscott/index.html b/coreyscott/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>La Taco Caliente</title>
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+     <h1>La Taco Caliente 🌶️</h1>
+    <p>Authentic street tacos with bold flavors</p>
+    <p class="tagline">🔥 Fresh • Delicious • Made Daily 🔥</p>
+  </header>
+
+  <section class="menu-controls">
+    <button class="menu-btn" data-category="tacos">🌮 Tacos 🌮</button>
+    <button class="menu-btn" data-category="burritos">🌯 Burritos 🌯</button>
+    <button class="menu-btn" data-category="quesadillas">🫓 Quesadillas 🫓</button>
+    <button class="menu-btn" data-category="sides">🌽 Sides 🌽</button>
+    <button class="menu-btn" data-category="specials">🌟 Specials 🌟</button>
+    <button class="menu-btn" data-category="drinks">🥤 Drinks 🥤</button>
+  </section>
+
+  <main class="menu-section">
+    <h2 id="menu-title">Menu</h2>
+    <div id="menu-display">
+      <p>Select a category to view menu items.</p>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/coreyscott/reflective ??? b/coreyscott/reflective ???
@@ -0,0 +1,20 @@
+//REFLECTIVE QUESTIONS
+
+//Question 1. How did JavaScript make your webpage interactive?
+//Answer..when a user clicks on a button, JavaScript updates the content on the page
+
+//Question 2. What did `querySelectorAll()` help you do?
+//Answer..allows you to select all the menu buttons at once
+
+//Question 3. What is the purpose of `addEventListener()`?
+//Answer..it is used to detect and respond to events, such as a user clicking a button
+
+//Question 4. Why is storing menu data in objects and arrays useful?
+//Answer 4..it allows you to store items in one place, making it easier to manage
+
+//Question 5. What was the hardest part of the project?
+//Answeer 5..the hardest part for me was making sure everything connected in javascript and
+understanding what each function was doing
+
+//Question 6. What would you add next if this were a real restaurant website?
+//Answer 6..I would add more iteractive features, more pictures next to menus items
diff --git a/coreyscott/script.js b/coreyscott/script.js
@@ -0,0 +1,73 @@
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+const menuData = {
+  tacos: [
+    { name: "Carne Asada Taco", description: "Grilled steak, onions, cilantro", price: "$5" },
+    { name: "Al Pastor Taco", description: "Marinated pork with pineapple", price: "$5" },
+    { name: "Chicken Street Taco", description: "Seasoned chicken, salsa verde", price: "$4" }
+  ],
+  burritos: [
+    { name: "Loaded Burrito", description: "Rice, beans, meat (chicken, steak or pork), cheese, sour cream", price: "$10" },
+    { name: "California Burrito", description: "Steak, fries, cheese, guac", price: "$11" },
+    { name: "Tu Madre Burrito", description: "Chicken & shrimp, rice, cheese, beans, peppers & onions", price: "$13" }
+  ],
+  quesadillas: [
+    { name: "El Pollo Quesadilla", description: "Grilled chicken, monterey jack, peppers & onions", price: "$10" },
+    { name: "Steak Quesadilla", description: "Steak, peppers, cheese", price: "$11" },
+    { name: "Cheese Quesadilla", description: "Melted cheese in a grilled tortilla", price: "$8" }
+  ],
+  sides: [
+    { name: "Chips & Guac", description: "Fresh guacamole with tortilla chips", price: "$6" },
+    { name: "Elote", description: "Mexican street corn with spices", price: "$5" }
+  ],
+  drinks: [
+    { name: "Horchata", description: "Sweet cinnamon rice drink", price: "$3" },
+    { name: "Jarritos", description: "Classic Mexican soda", price: "$3" }
+  ],
+  specials: [
+    { name: "Taco Tuesday 🌮🔥", description: "All tacos $3!", price: "4pm - 7pm" }
+  ]
+};
+
+function displayMenu(category) {
+  menuDisplay.innerHTML = "";
+
+  const categoryTitles = {
+    tacos: "Taco Menu",
+    burritos: "Burrito Menu",
+    quesadillas: "Quesadilla Menu",
+    sides: "Sides Menu",
+    drinks: "Drinks Menu",
+    specials: "Specials Menu"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+  menuData[category].forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    menuItem.innerHTML = `
+      <h3>${item.name}</h3>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    menuDisplay.appendChild(menuItem);
+  });
+}
+
+displayMenu("tacos");
+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/coreyscott/style.css b/coreyscott/style.css
@@ -0,0 +1,167 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  color: #2d2d2d;
+  line-height: 1.6;
+  padding: 20px;
+  position: relative;
+  min-height: 100vh;
+  background: transparent;
+  overflow-x: hidden;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-color: #1e3a5f;
+  background-image: url("images/taco-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 70% center;
+  z-index: -2;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.22);
+  z-index: -1;
+}
+
+.hero {
+  text-align: center;
+  margin: 0 auto 30px;
+  max-width: 900px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 30px 20px;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
+}
+
+.hero h1 {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 4.5rem;
+  color: #dc2626;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  text-align: center;
+  text-shadow:
+    2px 2px 0 #fff,
+    4px 4px 10px rgba(0, 0, 0, 0.2);
+     transform: translateX(60px);
+}
+
+.hero p {
+  color: #16a34a;
+}
+
+
+.menu-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.menu-btn {
+  padding: 12px 20px;
+  border: none;
+  background: linear-gradient(135deg, #dc2626, #991b1b);
+  color: white;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: all 0.3s ease;
+}
+
+.menu-btn:hover {
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
+}
+
+.menu-btn.active {
+  background: #facc15;
+  color: black;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
+}
+
+.menu-section {
+  max-width: 1000px;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.92);
+  padding: 25px;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
+}
+
+#menu-title {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2rem;
+  color: #991b1b;
+}
+
+#menu-display {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.menu-item {
+  background-color: white;
+  border-radius: 14px;
+  padding: 18px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  text-align: center;
+  border-top: 5px solid #facc15;
+}
+
+.menu-item:hover {
+  transform: translateY(-6px) scale(1.01);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
+}
+
+.menu-item h3 {
+  margin-bottom: 8px;
+}
+
+.menu-item p {
+  margin-bottom: 10px;
+  color: #555;
+  text-align: center;
+}
+
+.pepper {
+  font-size: 2.5rem;
+  transform: translateY(-2px);
+}
+.price {
+  font-weight: bold;
+  color: #d97706;
+}
+
+.tagline {
+  text-align: center;
+  margin-top: 10px;
+  font-weight: bold;
+  color: #b45309;
+  letter-spacing: 1px;
+}