.mortgage-calculator-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
line-height: 1.6;
}
.calc-box {
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.calc-title {
text-align: center;
margin-top: 0;
color: #2c3e50;
font-size: 24px;
margin-bottom: 25px;
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 600px) {
.input-grid {
grid-template-columns: 1fr;
}
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #555;
}
.input-group input, .input-group select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.input-group input:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.calc-btn {
width: 100%;
padding: 15px;
background-color: #2980b9;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.calc-btn:hover {
background-color: #2471a3;
}
.results-section {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #ddd;
display: none;
}
.result-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 16px;
}
.result-row.highlight {
font-weight: bold;
color: #2980b9;
font-size: 20px;
border-top: 2px dashed #eee;
padding-top: 15px;
margin-top: 10px;
}
.error-msg {
color: #e74c3c;
text-align: center;
margin-top: 10px;
display: none;
}
.content-section h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-top: 30px;
}
.content-section p {
margin-bottom: 15px;
}
.content-section ul {
margin-bottom: 20px;
padding-left: 20px;
}
.content-section li {
margin-bottom: 8px;
}
function calculateMortgage() {
// Get Input Values
var homePrice = parseFloat(document.getElementById("homePrice").value);
var downPayment = parseFloat(document.getElementById("downPayment").value);
var interestRate = parseFloat(document.getElementById("interestRate").value);
var loanTerm = parseFloat(document.getElementById("loanTerm").value);
var propertyTax = parseFloat(document.getElementById("propertyTax").value);
var homeInsurance = parseFloat(document.getElementById("homeInsurance").value);
// Validation
var errorDiv = document.getElementById("errorDisplay");
var resultsDiv = document.getElementById("resultsArea");
if (isNaN(homePrice) || isNaN(downPayment) || isNaN(interestRate) || isNaN(loanTerm) ||
homePrice <= 0 || interestRate < 0 || loanTerm = home price
if (loanAmount <= 0) {
document.getElementById("resPrincipalInterest").innerHTML = "$0.00";
document.getElementById("resTax").innerHTML = "$" + (propertyTax / 12).toFixed(2);
document.getElementById("resInsurance").innerHTML = "$" + (homeInsurance / 12).toFixed(2);
document.getElementById("resTotal").innerHTML = "$" + ((propertyTax + homeInsurance) / 12).toFixed(2);
document.getElementById("resLoanAmount").innerHTML = "$0.00";
document.getElementById("resTotalInterest").innerHTML = "$0.00";
resultsDiv.style.display = "block";
return;
}
var monthlyRate = (interestRate / 100) / 12;
var numberOfPayments = loanTerm * 12;
// Amortization Formula: M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1 ]
var monthlyPrincipalInterest = 0;
if (interestRate === 0) {
monthlyPrincipalInterest = loanAmount / numberOfPayments;
} else {
var powerFactor = Math.pow(1 + monthlyRate, numberOfPayments);
monthlyPrincipalInterest = loanAmount * ((monthlyRate * powerFactor) / (powerFactor – 1));
}
var monthlyTax = propertyTax / 12;
var monthlyInsurance = homeInsurance / 12;
var totalMonthlyPayment = monthlyPrincipalInterest + monthlyTax + monthlyInsurance;
var totalInterest = (monthlyPrincipalInterest * numberOfPayments) – loanAmount;
// Formatting Output
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
document.getElementById("resPrincipalInterest").innerHTML = formatter.format(monthlyPrincipalInterest);
document.getElementById("resTax").innerHTML = formatter.format(monthlyTax);
document.getElementById("resInsurance").innerHTML = formatter.format(monthlyInsurance);
document.getElementById("resTotal").innerHTML = formatter.format(totalMonthlyPayment);
document.getElementById("resLoanAmount").innerHTML = formatter.format(loanAmount);
document.getElementById("resTotalInterest").innerHTML = formatter.format(totalInterest);
// Show Results
resultsDiv.style.display = "block";
}
Mortgage Payment Calculator
30 Years
20 Years
15 Years
10 Years
Please enter valid positive numbers for all fields.
Principal & Interest:
–
Monthly Property Tax:
–
Monthly Home Insurance:
–
Total Monthly Payment:
–
Total Loan Amount: | Total Interest Paid:
Understanding Your Mortgage Payment
This Mortgage Calculator helps you estimate your monthly housing costs by breaking down the key components of a mortgage payment: Principal, Interest, Taxes, and Insurance (often referred to as PITI). Whether you are a first-time homebuyer or looking to refinance, understanding how these variables interact is crucial for financial planning.
Key Inputs Explained
- Home Price: The total purchase price of the real estate property.
- Down Payment: The amount of money paid upfront. A larger down payment reduces the loan amount and typically lowers your monthly payment.
- Interest Rate: The annual cost of borrowing money from a lender, expressed as a percentage. Even a small difference in rates can significantly impact the total cost of the loan over time.
- Loan Term: The duration of the mortgage. While a 30-year term offers lower monthly payments, a 15-year term usually secures a lower interest rate and results in significantly less total interest paid.
- Property Tax & Insurance: These are annual costs usually held in escrow and paid monthly. They vary by location and property value.
How Mortgage Amortization Works
Mortgage loans are typically amortized, meaning your monthly principal and interest payment remains constant over the life of the loan (for fixed-rate mortgages). However, the composition of that payment changes:
In the early years, the majority of your payment goes toward interest. As the loan matures and the principal balance decreases, a larger portion of your payment goes toward reducing the principal debt. This calculator uses the standard amortization formula to determine your exact monthly obligation.
Why Calculate Your Monthly Payment?
Before house hunting, it is essential to determine a budget that fits your financial goals. Lenders determine how much you can borrow, but only you can determine how much you should spend comfortably. Use this tool to experiment with different down payments and interest rates to see how they affect your monthly bottom line.