Settham79th's picture
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.
0305ba2 verified
// Shared JavaScript across all pages
document.addEventListener('DOMContentLoaded', function() {
// Donation amount selection
const amountButtons = document.querySelectorAll('.amount-btn');
const otherAmountContainer = document.getElementById('other-amount');
const customAmountInput = document.getElementById('custom-amount');
amountButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
amountButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Show/hide custom amount input
if (this.textContent === 'Other') {
otherAmountContainer.classList.remove('hidden');
customAmountInput.focus();
} else {
otherAmountContainer.classList.add('hidden');
}
});
});
// Donation form submission
const donationForm = document.getElementById('donation-form');
if (donationForm) {
donationForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get selected amount
let amount = '';
const activeButton = document.querySelector('.amount-btn.active');
if (activeButton) {
if (activeButton.textContent === 'Other') {
amount = customAmountInput.value || '0';
} else {
amount = activeButton.textContent.replace('$', '');
}
}
// In a real application, you would process the payment here
alert(`Thank you for your donation of $${amount}! Your contribution makes a difference.`);
donationForm.reset();
document.querySelector('.amount-btn:first-child').classList.add('active');
otherAmountContainer.classList.add('hidden');
});
}
// Newsletter form submission
const newsletterForm = document.getElementById('newsletter-form');
if (newsletterForm) {
newsletterForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
alert(`Thank you for subscribing with ${email}! You'll receive our next update soon.`);
this.reset();
});
}
});