Spaces:
Running
Running
| // 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); |