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(); | |
| }); | |
| } | |
| }); |