diff --git a/frontend/script.js b/frontend/script.js index ca89860..6fc8311 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -10,20 +10,42 @@ function signup() { alert('Sign-up functionality coming soon!'); } -// add functionality to hamburger +// Add functionality to hamburger menu // Select the hamburger icon and navigation links document.getElementById('hamburger').addEventListener('click', function() { - const navLinks = document.querySelector('.nav-links'); - const icon = this.querySelector('i'); + const navLinks = document.querySelector('.nav-links'); + const icon = this.querySelector('i'); - navLinks.classList.toggle('active'); - - if (navLinks.classList.contains('active')) { - icon.classList.remove('fa-bars'); - icon.classList.add('fa-times'); // Change to cross icon - } else { - icon.classList.remove('fa-times'); - icon.classList.add('fa-bars'); // Revert to hamburger icon - } + // Toggle the 'active' class on the navigation links + navLinks.classList.toggle('active'); + + // Change the icon based on the active state + if (navLinks.classList.contains('active')) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); // Change to cross icon + } else { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); // Revert to hamburger icon + } }); +// Ensure the hamburger icon exists before adding the event listener +const hamburgerIcon = document.getElementById('hamburger'); +if (hamburgerIcon) { + hamburgerIcon.addEventListener('click', function() { + const navLinks = document.querySelector('.nav-links'); + const icon = this.querySelector('i'); + + // Toggle the 'active' class on the navigation links + navLinks.classList.toggle('active'); + + // Change the icon based on the active state + if (navLinks.classList.contains('active')) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); // Change to cross icon + } else { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); // Revert to hamburger icon + } + }); +}