Do you think debt is dangerous? Here are some reasons why you should treat it with extreme caution.
Managing Money
Is your family in financial dire straits? Learn to stop playing games with your monthly budget.
document.addEventListener('DOMContentLoaded', () => {
const DONATION_CONFIG = {
url: 'https://donate.focusonthefamily.com/ffapl-25may-c?amount=',
defaultCode: '2269701',
minAmount: 1,
maxAmount: 999999
};
class DonationForm {
constructor(container) {
this.elements = {
form: container.querySelector('form'),
input: container.querySelector('.customAmount'),
button: container.querySelector('.donation-btn'),
error: container.querySelector('.error-message')
};
this.sourceCode = document.cookie.match('(^| )source-code=([^;]+)')?.[2] || DONATION_CONFIG.defaultCode;
this.setupEventListeners();
}
setupEventListeners() {
const { form, input } = this.elements;
form.addEventListener('submit', this.handleSubmit.bind(this));
input.addEventListener('input', this.updateButtonText.bind(this));
input.addEventListener('blur', this.validateInput.bind(this));
}
validateInput() {
const { input } = this.elements;
const amount = parseFloat(input.value);
if (amount DONATION_CONFIG.maxAmount) {
this.showError(`Please enter an amount between $${DONATION_CONFIG.minAmount} and $${DONATION_CONFIG.maxAmount}`);
input.value = '';
return false;
}
return true;
}
handleSubmit(e) {
e.preventDefault();
if (this.validateInput()) {
const url = new URL(DONATION_CONFIG.url + this.elements.input.value);
url.searchParams.append('refcd', this.sourceCode);
window.location.href = url.toString();
}
}
updateButtonText() {
const { input, button } = this.elements;
button.textContent = input.value > 0 ? `Donate $${input.value}` : 'Other';
}
showError(message) {
const { error } = this.elements;
error.textContent = message;
error.classList.add('visible');
setTimeout(() => error.classList.remove('visible'), 3000);
}
}
document.querySelectorAll('.donation-container').forEach(container => new DonationForm(container));
});
.donation-container {
--primary-color: #D65446;
--hover-color: #BD4235;
--text-color: #B34530;
width: 100%;
margin: 0 auto;
}
.donation-container * {
font: 700 16px 'Greycliff', Roboto, sans-serif;
box-sizing: border-box;
}
.custom-amount-section {
display: flex;
align-items: center;
gap: 10px;
}
.input-wrapper {
position: relative;
flex-grow: 1;
height: 50px;
}
.dollar-sign {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
font-size: 18px;
}
.customAmount {
width: 100%;
height: 100%;
padding: 0 25px;
border: 2px solid var(--primary-color);
border-radius: 7px;
font-size: 18px;
color: var(--text-color);
background-color: #fff;
appearance: none;
}
.customAmount:focus {
border-color: var(--hover-color);
box-shadow: 0 0 0 2px rgba(214, 84, 70, 0.2);
outline: none;
}
.donation-btn {
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 7px;
cursor: pointer;
font-size: 18px;
padding: 10px 25px;
width: 200px;
transition: background-color .3s ease;
}
.donation-btn:hover {
background-color: var(--hover-color);
}
.error-message {
background-color: rgba(214, 84, 70, 0.1);
border-radius: 4px;
color: var(--primary-color);
font-size: 14px;
margin-top: 8px;
opacity: 0;
padding: 8px;
text-align: center;
transition: opacity 0.3s ease;
}
.error-message.visible {
opacity: 1;
}
(function() {
const DAY_IN_MS = 86400000;
const setCookie = (name, days) => {
document.cookie = `${name}=true; expires=${new Date(Date.now() + days * DAY_IN_MS).toUTCString()}; path=/`;
};
const isCookieSet = (name) => document.cookie.includes(`${name}=true`);
const toggleSections = (toggleIconSelector, [section1Selector, section2Selector], cookieName) => {
const elements = {
toggle: document.querySelector(toggleIconSelector),
section1: document.querySelector(section1Selector),
section2: document.querySelector(section2Selector)
};
if (!elements.toggle || !elements.section1 || !elements.section2) return;
if (isCookieSet(cookieName)) {
elements.toggle.style.display = 'none';
elements.section1.style.display = 'none';
elements.section2.style.display = 'flex';
return;
}
elements.section2.style.display = 'none';
elements.toggle.addEventListener('click', () => {
elements.section1.style.display = elements.section1.style.display === 'none' ? 'flex' : 'none';
elements.section2.style.display = elements.section2.style.display === 'none' ? 'flex' : 'none';
elements.toggle.style.display = 'none';
setCookie(cookieName, 7);
});
};
// Toggle functionality for both desktop and mobile
toggleSections('.elementor-element-555e148', ['.elementor-element-b741093', '.elementor-element-29c1421'], 'desktopToggleClicked');
toggleSections('.elementor-element-2fdbb2b', ['.elementor-element-24558da', '.elementor-element-3a0ce74'], 'mobileToggleClicked');
})();
