Amortization Calculator with Extra Payments
Calculate your loan amortization schedule with extra payments to reduce the loan term or monthly payment.
document.getElementById(“amortizationForm”).addEventListener(“submit”, function(event) {
event.preventDefault();
const loanAmount = parseFloat(document.getElementById(“loanAmount”).value);
const interestRate = parseFloat(document.getElementById(“interestRate”).value) / 100 / 12;
const loanTerm = parseInt(document.getElementById(“loanTerm”).value) * 12;
const extraPayment = parseFloat(document.getElementById(“extraPayment”).value);
const monthlyPayment = (loanAmount * interestRate) / (1 – Math.pow(1 + interestRate, -loanTerm));
let remainingBalance = loanAmount;
let totalInterest = 0;
let monthsToPayOff = loanTerm;
while (remainingBalance > 0) {
const interestForMonth = remainingBalance * interestRate;
let principalForMonth = monthlyPayment – interestForMonth + extraPayment;
if (remainingBalance < principalForMonth) {
principalForMonth = remainingBalance;
}
remainingBalance -= principalForMonth;
totalInterest += interestForMonth;
monthsToPayOff–;
if (remainingBalance <= 0) {
break;
}
}
const totalPayments = (monthlyPayment * loanTerm) + (extraPayment * monthsToPayOff);
const newLoanTerm = (loanTerm – monthsToPayOff) / 12;
document.getElementById("totalInterest").textContent = "Total Interest Paid: $" + totalInterest.toFixed(2);
document.getElementById("totalPayments").textContent = "Total Payments Made: $" + totalPayments.toFixed(2);
document.getElementById("newLoanTerm").textContent = "New Loan Term: " + newLoanTerm.toFixed(2) + " years";
});
.calculator-container {
max-width: 600px;
margin: 0 auto;
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.calculator-title {
text-align: center;
margin-bottom: 20px;
}
.calculator-title h2 {
margin: 0;
font-size: 1.5em;
}
form label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
input[type=”number”] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
.button-group {
display: flex;
justify-content: space-between;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
button[type=”reset”] {
background-color: #dc3545;
}
#result {
margin-top: 20px;
background-color: #e9ecef;
padding: 15px;
border-radius: 10px;
}
#result h3 {
margin-top: 0;
}
