script.js

document.querySelectorAll('.rsvp-btn').forEach(button => {
    button.addEventListener('click', (e) => {
        const modal = document.getElementById('rsvp-modal');
        const closeBtn = document.querySelector('.close-btn');
        const form = document.getElementById('rsvp-form');
        const confirmationMessage = modal.querySelector('.rsvp-confirmation-message');
        
        modal.style.display = 'block';

        
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        form.addEventListener('submit', (event) => {
            event.preventDefault();
            
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const guests = document.getElementById('guests').value;
            

            confirmationMessage.textContent = `Thank you for your RSVP, ${name}! We have reserved a spot for you and ${guests} guests.`;
            confirmationMessage.style.color = 'green';
            

            setTimeout(() => {
                modal.style.display = 'none';
            }, 3000);
        });
    });
});


window.addEventListener('click', (e) => {
    const modal = document.getElementById('rsvp-modal');
    if (e.target == modal) {
        modal.style.display = 'none';
    }
});