File size: 4,188 Bytes
d1848f7 |
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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
document.addEventListener('DOMContentLoaded', function() {
// Range input value updaters
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueDisplay = input.nextElementSibling.querySelector('span');
const min = parseInt(input.min);
const max = parseInt(input.max);
// Initial value display
if (input.id === 'termMonths') {
const years = Math.round(input.value / 12);
valueDisplay.textContent = `${input.value} months (${years} years)`;
} else if (input.id === 'downPaymentPercent') {
valueDisplay.textContent = `${input.value}%`;
} else {
valueDisplay.textContent = input.value;
}
// Update on change
input.addEventListener('input', function() {
if (this.id === 'termMonths') {
const years = Math.round(this.value / 12);
valueDisplay.textContent = `${this.value} months (${years} years)`;
} else if (this.id === 'downPaymentPercent') {
valueDisplay.textContent = `${this.value}%`;
} else {
valueDisplay.textContent = this.value;
}
});
});
// Simulate button click handler
const simulateBtn = document.querySelector('.bg-gradient-to-r.from-green-500');
if (simulateBtn) {
simulateBtn.addEventListener('click', function() {
// Show loading state
this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Calculating...';
feather.replace();
// Simulate API call delay
setTimeout(() => {
// Scroll to results section
document.querySelector('.lg\\:col-span-2').scrollIntoView({
behavior: 'smooth'
});
// Reset button text
this.textContent = 'Calculate Options';
}, 1500);
});
}
// Option selection handler
const optionSelectBtns = document.querySelectorAll('.border.border-gray-200 button');
optionSelectBtns.forEach(btn => {
btn.addEventListener('click', function() {
// Remove selected state from all options
optionSelectBtns.forEach(b => {
b.classList.remove('bg-green-500', 'hover:bg-green-600', 'text-white');
b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
b.textContent = 'Select';
});
// Add selected state to clicked option
this.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
this.classList.add('bg-green-500', 'hover:bg-green-600', 'text-white');
this.textContent = 'Selected';
// Show next steps (simulated)
const nextSteps = document.createElement('div');
nextSteps.className = 'mt-8 bg-green-50 border border-green-200 rounded-xl p-6';
nextSteps.innerHTML = `
<h3 class="text-lg font-bold text-green-800 mb-2">Next Steps</h3>
<p class="text-green-700 mb-4">Your selected financing option has been saved. Click below to proceed with your application.</p>
<button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg">
Continue Application
</button>
`;
// Remove existing next steps if any
const existing = document.querySelector('.bg-green-50.border-green-200');
if (existing) existing.remove();
// Insert next steps after options
document.querySelector('.space-y-4').insertAdjacentElement('afterend', nextSteps);
// Add click handler for continue button
nextSteps.querySelector('button').addEventListener('click', function() {
alert('Application process would continue here in a real implementation.');
});
});
});
}); |