assets/js/script.js

// Mobile Navigation Toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

// Close mobile menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        navLinks.classList.remove('active');
    });
});

// Form Submission Handling
const coffeeForm = document.getElementById('coffeeForm');

coffeeForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get form values
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const coffee = document.getElementById('coffee').value;
    
    // Simple validation
    if(name && email && coffee) {
        // Create success message
        const successMsg = document.createElement('div');
        successMsg.className = 'form-success';
        successMsg.textContent = `Thanks ${name}! Your order for ${coffee} has been placed. We'll send confirmation to ${email}.`;
        
        // Insert before form
        this.parentNode.insertBefore(successMsg, this);
        successMsg.style.display = 'block';
        
        // Reset form
        this.reset();
        
        // Remove message after 5 seconds
        setTimeout(() => {
            successMsg.remove();
        }, 5000);
    } else {
        // Create error message
        const errorMsg = document.createElement('div');
        errorMsg.className = 'form-error';
        errorMsg.textContent = 'Please fill in all required fields.';
        
        // Insert before form
        this.parentNode.insertBefore(errorMsg, this);
        errorMsg.style.display = 'block';
        
        // Remove message after 3 seconds
        setTimeout(() => {
            errorMsg.remove();
        }, 3000);
    }
});

// Scroll animation for sections
const sections = document.querySelectorAll('section');

const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

sections.forEach(section => {
    observer.observe(section);
});

// Add visible class for initial load
document.getElementById('home').classList.add('visible');

// Smooth scroll for anchor 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'
            });
        }
    });
});

// Add animation classes to sections
document.addEventListener('DOMContentLoaded', function() {
    const style = document.createElement('style');
    style.textContent = `
        section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        section.visible {
            opacity: 1;
            transform: translateY(0);
        }
    `;
    document.head.appendChild(style);
});