bean-bliss-caf / script.js
Mikeshu's picture
Create a modern coffee shop website with a cozy hero image, menu board with drinks and pastries, about our story section, location finder, online ordering button, and Instagram gallery showing café atmosphere.
df67a94 verified
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for all links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Add shadow to navbar on scroll
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('shadow-lg');
} else {
nav.classList.remove('shadow-lg');
}
});
// Initialize feather icons (though they're also initialized in HTML)
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});