Loan Calculator
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#loan-form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 100%;
height: 40px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
padding: 10px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}
#results {
margin-top: 20px;
}
#monthly-payment, #total-interest, #total-amount {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
const loanForm = document.getElementById('loan-form');
const results = document.getElementById('results');
loanForm.addEventListener('submit', (e) => {
e.preventDefault();
const loanAmount = parseFloat(document.getElementById('loan-amount').value);
const interestRate = parseFloat(document.getElementById('interest-rate').value) / 100;
const loanTerm = parseInt(document.getElementById('loan-term').value);
const monthlyInterestRate = interestRate / 12;
const numberOfPayments = loanTerm * 12;
const monthlyPayment = loanAmount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments) / (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1);
const totalInterest = monthlyPayment * numberOfPayments - loanAmount;
const totalAmount = loanAmount + totalInterest;
results.innerHTML = `
${monthlyPayment.toFixed(2)}
${totalInterest.toFixed(2)}
${totalAmount.toFixed(2)}
`;
});
Comments
Post a Comment