File size: 2,776 Bytes
4abcd02 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
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();
}); |