Create a non-profit organization website with mission statement hero, our impact statistics, current campaigns, donation form with amounts, volunteer opportunities, success stories, upcoming events, and newsletter signup.
4abcd02 verified | document.addEventListener('DOMContentLoaded', function() { | |
| // Animate impact numbers | |
| const animateNumbers = () => { | |
| const counters = document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.innerText.replace('+', ''); | |
| const increment = target / speed; | |
| let current = 0; | |
| const updateCount = () => { | |
| current += increment; | |
| if (current < target) { | |
| counter.innerText = Math.floor(current) + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : ''); | |
| setTimeout(updateCount, 1); | |
| } else { | |
| counter.innerText = target + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : ''); | |
| } | |
| }; | |
| updateCount(); | |
| counter.classList.add('count-up'); | |
| }); | |
| }; | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| if (entry.target.id === 'lives-changed') { | |
| animateNumbers(); | |
| } | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| // Observe elements | |
| document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Donation amount selection | |
| const donationAmounts = document.querySelectorAll('.donation-amount'); | |
| donationAmounts.forEach(button => { | |
| button.addEventListener('click', function() { | |
| donationAmounts.forEach(btn => { | |
| btn.classList.remove('bg-red-100', 'border-red-500', 'text-red-700'); | |
| btn.classList.add('bg-white', 'border-gray-300'); | |
| }); | |
| this.classList.remove('bg-white', 'border-gray-300'); | |
| this.classList.add('bg-red-100', 'border-red-500', 'text-red-700'); | |
| document.getElementById('custom-amount').value = this.textContent.replace('$', ''); | |
| }); | |
| }); | |
| // Form submission | |
| const donationForm = document.getElementById('donation-form'); | |
| if (donationForm) { | |
| donationForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically handle the form submission | |
| alert('Thank you for your donation! A confirmation has been sent to your email.'); | |
| this.reset(); | |
| }); | |
| } | |
| // Initialize feather icons | |
| feather.replace(); | |
| }); |