.mortgage-calculator-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
padding: 2rem;
}
.mc-header {
text-align: center;
margin-bottom: 2rem;
color: #2c3e50;
}
.mc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.mc-input-group {
margin-bottom: 1rem;
}
.mc-input-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #4a5568;
font-size: 0.9rem;
}
.mc-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.mc-input-prefix, .mc-input-suffix {
position: absolute;
color: #718096;
font-size: 0.95rem;
padding: 0 10px;
pointer-events: none;
}
.mc-input-prefix { left: 0; }
.mc-input-suffix { right: 0; }
.mc-input {
width: 100%;
padding: 10px 12px;
padding-left: 25px; /* adjust for prefix */
border: 1px solid #cbd5e0;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s;
}
.mc-input:focus {
outline: none;
border-color: #3182ce;
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
.mc-input-no-prefix {
padding-left: 12px;
}
.mc-btn-container {
grid-column: 1 / -1;
margin-top: 1rem;
text-align: center;
}
.mc-btn {
background-color: #2b6cb0;
color: white;
border: none;
padding: 12px 30px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
}
.mc-btn:hover {
background-color: #2c5282;
}
.mc-results {
grid-column: 1 / -1;
background-color: #f7fafc;
border-radius: 8px;
padding: 1.5rem;
margin-top: 2rem;
border: 1px solid #e2e8f0;
display: none; /* Hidden by default */
}
.mc-results.active {
display: block;
}
.mc-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 0;
border-bottom: 1px solid #e2e8f0;
}
.mc-result-row:last-child {
border-bottom: none;
}
.mc-result-label {
color: #4a5568;
font-weight: 500;
}
.mc-result-value {
font-weight: 700;
color: #2d3748;
font-size: 1.1rem;
}
.mc-total-payment {
margin-top: 1rem;
background: #ebf8ff;
padding: 1rem;
border-radius: 6px;
text-align: center;
border: 1px solid #bee3f8;
}
.mc-total-payment .label {
color: #2b6cb0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.mc-total-payment .value {
color: #2c5282;
font-size: 2rem;
font-weight: 800;
margin-top: 0.2rem;
}
.mc-content {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #edf2f7;
line-height: 1.6;
color: #2d3748;
}
.mc-content h2 {
color: #2c3e50;
margin-top: 1.5rem;
font-size: 1.5rem;
}
.mc-content h3 {
color: #4a5568;
margin-top: 1.2rem;
font-size: 1.2rem;
}
.mc-content p {
margin-bottom: 1rem;
}
.mc-content ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.mc-content li {
margin-bottom: 0.5rem;
}
@media (max-width: 600px) {
.mc-grid {
grid-template-columns: 1fr;
}
}
function calculateMortgage() {
// 1. Get Input Values
var homePrice = parseFloat(document.getElementById('mc-home-price').value);
var downPayment = parseFloat(document.getElementById('mc-down-payment').value);
var interestRate = parseFloat(document.getElementById('mc-interest-rate').value);
var loanTermYears = parseFloat(document.getElementById('mc-loan-term').value);
var propertyTaxYear = parseFloat(document.getElementById('mc-property-tax').value);
var insuranceYear = parseFloat(document.getElementById('mc-insurance').value);
// 2. Validation
if (isNaN(homePrice) || isNaN(downPayment) || isNaN(interestRate) || isNaN(loanTermYears)) {
alert("Please fill in all required fields with valid numbers.");
return;
}
// Handle optional fields if empty
if (isNaN(propertyTaxYear)) propertyTaxYear = 0;
if (isNaN(insuranceYear)) insuranceYear = 0;
// 3. Core Logic
var principal = homePrice – downPayment;
// Prevent negative principal
if (principal 0) {
monthlyPrincipalInterest = principal / numberOfPayments;
} else {
monthlyPrincipalInterest = 0;
}
} else {
// Mortgage Formula: M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1 ]
var mathPow = Math.pow(1 + monthlyInterestDecimal, numberOfPayments);
if (mathPow > 0) {
monthlyPrincipalInterest = principal * ((monthlyInterestDecimal * mathPow) / (mathPow – 1));
}
}
// Monthly Tax and Insurance
var monthlyTax = propertyTaxYear / 12;
var monthlyInsurance = insuranceYear / 12;
var totalMonthlyPayment = monthlyPrincipalInterest + monthlyTax + monthlyInsurance;
// Total Calculations
var totalPrincipalInterestPaid = monthlyPrincipalInterest * numberOfPayments;
var totalInterestPaid = totalPrincipalInterestPaid – principal;
var totalCostOfLoan = principal + totalInterestPaid; // Just P&I context usually, or total payments? Sticking to Total P+I for logical "Cost of Loan" excluding taxes
// 4. Update UI
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
document.getElementById('mc-monthly-payment').innerText = formatter.format(totalMonthlyPayment);
document.getElementById('mc-pi-payment').innerText = formatter.format(monthlyPrincipalInterest);
document.getElementById('mc-loan-amount').innerText = formatter.format(principal);
document.getElementById('mc-monthly-tax').innerText = formatter.format(monthlyTax);
document.getElementById('mc-monthly-insurance').innerText = formatter.format(monthlyInsurance);
document.getElementById('mc-total-interest').innerText = formatter.format(totalInterestPaid);
document.getElementById('mc-total-cost').innerText = formatter.format(totalCostOfLoan);
// Show results container
document.getElementById('mc-results').classList.add('active');
}
How to Use This Mortgage Calculator
Purchasing a home is one of the biggest financial decisions you will make. This Mortgage Calculator is designed to provide a comprehensive breakdown of your monthly financial obligations. By inputting your specific loan details—such as home price, down payment, interest rate, and loan term—you can instantly visualize your monthly payments and long-term costs.
Unlike simple calculators, this tool allows you to factor in Property Taxes and Homeowners Insurance, giving you a realistic "out-the-door" monthly cost (often referred to as PITI: Principal, Interest, Taxes, and Insurance).
Understanding the Components of Your Mortgage
When you take out a mortgage loan, your monthly payment is split into several parts. Understanding these will help you budget more effectively:
1. Principal
This is the portion of your payment that goes directly toward paying down the money you borrowed. In the early years of a standard 30-year fixed mortgage, a very small percentage of your payment goes to principal, while the majority goes to interest.
2. Interest
Interest is the fee the lender charges for lending you money. Your interest rate is determined by economic factors and your personal credit score. A lower interest rate can save you tens of thousands of dollars over the life of the loan. As seen in the calculator results under "Total Interest Paid," even a 0.5% difference can be significant.
3. Escrow: Taxes and Insurance
Most lenders require you to pay a portion of your annual property taxes and homeowners insurance each month. These funds are held in an escrow account and paid on your behalf when due. This calculator includes fields for these costs so you don't get surprised by a bill that is higher than just the loan repayment itself.
Factors That Affect Your Monthly Payment
- Loan Term: A 30-year term typically offers lower monthly payments but results in higher total interest paid compared to a 15-year term.
- Down Payment: A larger down payment reduces the principal loan amount, which lowers both your monthly payment and total interest costs. If you put down less than 20%, you may also be required to pay Private Mortgage Insurance (PMI), which is an extra cost not included in the standard P&I calculation.
- Credit Score: Borrowers with higher credit scores generally qualify for lower interest rates.
Why Amortization Matters
Amortization refers to the schedule of payments that pays off your loan over time. While your total fixed monthly payment remains the same, the ratio of principal to interest changes every month. At the beginning of your loan term, you are primarily paying off interest. Toward the end of the term, your payments are primarily reducing the principal balance.
Use the "Total Cost of Loan" metric in the results section above to see exactly how much the house will cost you in principal plus interest by the time you make your final payment.