// Initialize components and animations document.addEventListener('DOMContentLoaded', function() { // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-fadeIn'); observer.unobserve(entry.target); } }); }, observerOptions); // Observe all elements with data-animate attribute document.querySelectorAll('[data-animate]').forEach(el => { observer.observe(el); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); }); // Form validation for donation form function validateDonationForm() { const form = document.querySelector('#donate form'); if (form) { form.addEventListener('submit', function(e) { e.preventDefault(); // Validate form fields const name = document.getElementById('name').value; const email = document.getElementById('email').value; const card = document.getElementById('card').value; if (!name || !email || !card) { alert('Please fill in all required fields'); return; } // Simulate donation processing alert('Thank you for your donation! A receipt has been sent to your email.'); form.reset(); }); } } // Initialize form validation when DOM is loaded document.addEventListener('DOMContentLoaded', validateDonationForm);