Jules PR

app.js

@@ -241,6 +241,32 @@ document.addEventListener('DOMContentLoaded', () => {
             checkAnswer();
         }
     });
+
+    // Hamburger Menu Logic
+    const hamburgerIcon = document.getElementById('hamburger-icon');
+    const dropdownMenu = document.getElementById('dropdown-menu');
+    const menuNewQuestion = document.getElementById('menu-new-question');
+    const menuShowHideAnswer = document.getElementById('menu-show-hide-answer');
+
+    if (hamburgerIcon && dropdownMenu) {
+        hamburgerIcon.addEventListener('click', () => {
+            dropdownMenu.classList.toggle('open');
+        });
+    }
+
+    if (menuNewQuestion) {
+        menuNewQuestion.addEventListener('click', () => {
+            getNewQuestion();
+            if (dropdownMenu) dropdownMenu.classList.remove('open'); // Close menu
+        });
+    }
+
+    if (menuShowHideAnswer) {
+        menuShowHideAnswer.addEventListener('click', () => {
+            showHideAnswer();
+            if (dropdownMenu) dropdownMenu.classList.remove('open'); // Close menu
+        });
+    }
 
     // Initial question load
     getNewQuestion();

index.html

@@ -20,9 +20,19 @@
 
         <!-- TITLE -->
         <div class="title-div">
+            <button id="hamburger-icon" aria-label="Open menu">
+                <i class="fas fa-bars"></i>
+            </button>
+            <h1 id="main-title">jeoPARODY!</h1>
+            <div class="title-spacer"></div> <!-- Spacer for centering title with flexbox -->
+        </div>
 
-            <img class="title-image" src="https://res.cloudinary.com/alexbaldman/image/upload/c_scale,e_auto_saturation,h_72,q_65,w_373/v1592202698/Jeopardish/title_zldpdq.png" alt="Jeopardish!">
-
+        <!-- DROPDOWN MENU -->
+        <div id="dropdown-menu"> <!-- Will be controlled by JS, initially styled to be hidden -->
+            <ul>
+                <li><button id="menu-new-question">New Question</button></li>
+                <li><button id="menu-show-hide-answer">Show/Hide Answer</button></li>
+            </ul>
         </div>
 
         <!-- NEW QUESTION & SHOW/HIDE ANSWER BUTTONS -->