code-differently · Bferg2002 · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026
diff --git a/bryantferguson/src/code/index.html b/bryantferguson/src/code/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>Interactive Restaurant Menu</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <header class="hero">
+        <img src = "../images/B.jpg" alt="Bryant's Brilliant Bar Logo" class="logo" />
+
+    <h1>Bryant's Brilliant Bar</h1>
+    <p>The best bar you'll ever visit!</p>
+  </header>
+
+  <section class="menu-controls">
+    <button class="menu-btn" data-category="vodka">Vodka</button>
+    <button class="menu-btn" data-category="whiskey">Whiskey</button>
+    <button class="menu-btn" data-category="rum">Rum</button>
+    <button class="menu-btn" data-category="tequila">Tequila</button>
+    <button class="menu-btn" data-category="gin">Gin</button>
+    <button class="menu-btn" data-category="brandy">Brandy</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/bryantferguson/src/code/script.js b/bryantferguson/src/code/script.js
@@ -0,0 +1,82 @@
+console.log("JavaScript is connected!");
+
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+console.log(buttons);
+console.log(menuTitle);
+console.log(menuDisplay);
+
+const menuData = {
+  vodka: [
+    { name: "Irish Coffee", description: "Whiskey, coffee, sugar, and cream", price: "$9" },
+    { name: "Mimosa", description: "Champagne and orange juice", price: "$8" },
+    { name: "Bloody Mary", description: "Vodka, tomato juice, and spices", price: "$9" }
+  ],
+  whiskey: [
+    { name: "Whiskey Sour", description: "Whiskey, lemon juice, and sugar", price: "$10" },
+    { name: "Old Fashioned", description: "Whiskey, bitters, sugar, and orange", price: "$12" },
+    { name: "Manhattan", description: "Whiskey, sweet vermouth, and bitters", price: "$12" }
+  ],
+  rum: [
+    { name: "Bellini", description: "Prosecco and peach purée", price: "$9" },
+    { name: "Aperol Spritz", description: "Aperol, prosecco, and soda", price: "$10" },
+    { name: "Screwdriver", description: "Vodka and orange juice", price: "$8" }
+  ],
+  tequila: [
+    { name: "Negroni", description: "Gin, Campari, and sweet vermouth", price: "$12" },
+    { name: "Martini", description: "Gin or vodka with dry vermouth", price: "$11" },
+    { name: "Boulevardier", description: "Whiskey, Campari, and sweet vermouth", price: "$12" }
+  ], 
+  gin: [
+  { name: "Gin & Tonic", description: "Gin with tonic water and lime", price: "$9" },
+  { name: "Tom Collins", description: "Gin, lemon juice, sugar, and soda", price: "$10" },
+  { name: "Negroni", description: "Gin, Campari, and sweet vermouth", price: "$12" }
+],
+brandy: [
+  { name: "Sidecar", description: "Brandy, orange liqueur, and lemon juice", price: "$11" },
+  { name: "Brandy Alexander", description: "Brandy, cream, and chocolate liqueur", price: "$12" },
+  { name: "French Connection", description: "Brandy and amaretto", price: "$11" }
+]
+};
+
+
+function displayMenu(category) {
+  menuDisplay.innerHTML = "";
+
+  const categoryTitles = {
+    vodka: "Vodka",
+    whiskey: "Whiskey",
+    rum: "Rum",
+    tequila: "Tequila",
+    gin: "Gin",
+    brandy: "Brandy"
+  };
+
+  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("vodka");
+
+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/bryantferguson/src/code/style.css b/bryantferguson/src/code/style.css
@@ -0,0 +1,100 @@
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #1F456E;
+  color: orange;
+  line-height: 1.6;
+  padding: 20px;
+  font-style: normal;
+  font-family: "Times New Roman", Times, serif;
+}
+
+.hero {
+  text-align: center;  
+  margin-bottom: 30px;
+  color: goldenrod;
+}
+
+.logo {
+  width: 150px;
+  height: 150px;
+  margin-bottom: 20px;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.hero p {
+  font-size: 1.1rem;
+  color: goldenrod;
+}
+
+.menu-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.menu-btn {
+  padding: 12px 18px;
+  border: none;
+  background-color: goldenrod;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.menu-btn:hover {
+  background-color: orange;
+}
+
+.menu-btn.active {
+  background-color: #d97706;
+}
+
+.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: white;
+  border-radius: 10px;
+  padding: 18px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.menu-item h3 {
+  margin-bottom: 8px;
+}
+
+.menu-item p {
+  margin-bottom: 10px;
+  color: goldenrod;
+}
+
+.price {
+  font-weight: bold;
+  color: #d97706;
+}
diff --git a/bryantferguson/src/images/B.jpg b/bryantferguson/src/images/B.jpg
diff --git a/bryantferguson/src/images/Screenshot.png b/bryantferguson/src/images/Screenshot.png