Mortgage Calculator
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.form-container, .result-container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.chart-container {
margin-top: 30px;
}
.chart-container canvas {
width: 100%;
height: 400px;
}
.result-container p {
font-size: 1.1em;
}
Mortgage Calculator
Mortgage Calculation Results
Monthly Principal & Interest: $
Monthly Property Taxes: $
Monthly Home Insurance: $
Monthly PMI: $
Monthly HOA Fees: $
Total Monthly Payment: $
Summary of Payments
Total Interest Paid: $
Total Payments (Principal + Interest + Other Fees): $
Total of All Payments: $
Amortization Chart
function calculateMortgage() {
const homeValue = parseFloat(document.getElementById('homeValue').value);
const downPaymentPercent = parseFloat(document.getElementById('downPayment').value) / 100;
const interestRate = parseFloat(document.getElementById('interestRate').value) / 100;
const amortizationPeriod = parseFloat(document.getElementById('amortizationPeriod').value);
const pmiRate = parseFloat(document.getElementById('pmi').value) / 100;
const propertyTaxRate = parseFloat(document.getElementById('propertyTax').value) / 100;
const homeInsuranceRate = parseFloat(document.getElementById('homeInsurance').value) / 100;
const hoaFees = parseFloat(document.getElementById('hoaFees').value);
// Loan amount
const loanAmount = homeValue * (1 - downPaymentPercent);
const numPayments = amortizationPeriod * 12; // Total number of monthly payments
const monthlyInterestRate = interestRate / 12;
// Monthly payment for principal & interest (using the mortgage formula)
const mortgagePayment = loanAmount * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numPayments)) /
(Math.pow(1 + monthlyInterestRate, numPayments) - 1);
// Monthly property taxes and insurance
const monthlyPropertyTaxes = (homeValue * propertyTaxRate) / 12;
const monthlyHomeInsurance = (homeValue * homeInsuranceRate) / 12;
// PMI until 80% LTV
let monthlyPMI = 0;
if (loanAmount / homeValue > 0.8) {
monthlyPMI = loanAmount * pmiRate / 12;
}
// Total monthly payment
const totalMonthlyPayment = mortgagePayment + monthlyPropertyTaxes + monthlyHomeInsurance + monthlyPMI + hoaFees;
// Calculate total interest paid
const totalInterestPaid = (mortgagePayment * numPayments) - loanAmount;
// Calculate total payments (principal + interest + other costs)
const totalPayments = mortgagePayment * numPayments;
const totalAllPayments = totalPayments + (monthlyPropertyTaxes * numPayments) + (monthlyHomeInsurance * numPayments) + (monthlyPMI * numPayments) + (hoaFees * numPayments);
// Update results
document.getElementById('monthlyPI').textContent = mortgagePayment.toFixed(2);
document.getElementById('monthlyTax').textContent = monthlyPropertyTaxes.toFixed(2);
document.getElementById('monthlyInsurance').textContent = monthlyHomeInsurance.toFixed(2);
document.getElementById('monthlyPMI').textContent = monthlyPMI.toFixed(2);
document.getElementById('monthlyHOA').textContent = hoaFees.toFixed(2);
document.getElementById('totalPayment').textContent = totalMonthlyPayment.toFixed(2);
document.getElementById('totalInterestPaid').textContent = totalInterestPaid.toFixed(2);
document.getElementById('totalPayments').textContent = totalPayments.toFixed(2);
document.getElementById('totalAllPayments').textContent = totalAllPayments.toFixed(2);
// Show results
document.getElementById('results').style.display = 'block';
// Amortization Chart Data
const amortizationData = [];
let balance = loanAmount;
for (let i = 0; i data.month),
datasets: [{
label: 'Remaining Balance',
data: amortizationData.map(data => data.balance),
fill: false,
borderColor: '#FF5733',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: 'Months'
}
},
y: {
title: {
display: true,
text: 'Remaining Loan Balance ($)'
},
ticks: {
beginAtZero: false
}
}
}
}
});
}
