---------------------- <style> body { font-family: Arial, sans-serif; text-align: center; padding: 40px; } .top-section { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 30px; } .input-group { display: flex; flex-direction: column; align-items: flex-start; margin: 0 10px; } label { font-weight: bold; margin-bottom: 5px; } input[type="number"], input[type="text"] { padding: 8px; width: 180px; font-size: 16px; } input[type="range"] { transform: rotate(-90deg); width: 100px; } .bottom-section { display: flex; justify-content: center; align-items: center; gap: 10px; } .slider-vertical { display: flex; flex-direction: column; align-items: center; } </style> </head> <body> <h2>Payment Duration Calculator</h2> <div class="top-section"> <div class="slider-vertical"> <input type="range" id="rateSlider" min="50" max="1000" step="10" value="200"> <span>Rate</span> </div> <div class="input-group"> <label for="rate">Rate per Month ($):</label> <input type="number" id="rate" value="200"> </div> <div class="input-group"> <label for="total">Full Payment ($):</label> <input type="number" id="total" placeholder="e.g., 4800"> </div> </div> <div class="bottom-section"> <div class="input-group"> <label for="duration">Duration (Years & Months, e.g. 2y 6m):</label> <input type="text" id="duration" placeholder="e.g., 2y 6m"> </div> <div class="slider-vertical"> <input type="range" id="durationSlider" min="1" max="240" step="1" value="24"> <span>Months</span> </div> </div> <script> const rateInput = document.getElementById("rate"); const totalInput = document.getElementById("total"); const durationInput = document.getElementById("duration"); const rateSlider = document.getElementById("rateSlider"); const durationSlider = document.getElementById("durationSlider"); let updating = false; function updateDurationFromValues() { if (updating) return; const rate = parseFloat(rateInput.value); const total = parseFloat(totalInput.value); if (rate > 0 && total > 0) { updating = true; const months = Math.floor(total / rate); const years = Math.floor(months / 12); const remMonths = months % 12; durationInput.value = `${years}y ${remMonths}m`; durationSlider.value = months; updating = false; } } function updateRateFromDurationText() { if (updating) return; const total = parseFloat(totalInput.value); const match = durationInput.value.match(/(\d+)\s*y\s*(\d*)\s*m?/i); if (total > 0 && match) { updating = true; const years = parseInt(match[1]) || 0; const months = parseInt(match[2]) || 0; const totalMonths = years * 12 + months; if (totalMonths > 0) { const newRate = total / totalMonths; rateInput.value = newRate.toFixed(2); rateSlider.value = Math.round(newRate); durationSlider.value = totalMonths; } updating = false; } } function updateDurationFromSlider() { if (updating) return; const months = parseInt(durationSlider.value); const years = Math.floor(months / 12); const remMonths = months % 12; durationInput.value = `${years}y ${remMonths}m`; const total = parseFloat(totalInput.value); if (total > 0 && months > 0) { const rate = total / months; updating = true; rateInput.value = rate.toFixed(2); rateSlider.value = Math.round(rate); updating = false; } } function updateRateFromSlider() { if (updating) return; const rate = parseInt(rateSlider.value); rateInput.value = rate; updateDurationFromValues(); } rateInput.addEventListener("input", () => { rateSlider.value = rateInput.value; updateDurationFromValues(); }); totalInput.addEventListener("input", () => { updateDurationFromValues(); updateRateFromDurationText(); }); durationInput.addEventListener("input", updateRateFromDurationText); rateSlider.addEventListener("input", updateRateFromSlider); durationSlider.addEventListener("input", updateDurationFromSlider); </script> </body> </html> </plaintext>