.mortgage-calculator-widget {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.mc-header {
background-color: #2c3e50;
color: #ffffff;
padding: 20px;
border-radius: 8px 8px 0 0;
text-align: center;
}
.mc-header h2 {
margin: 0;
font-size: 24px;
}
.mc-container {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 20px;
}
.mc-inputs {
flex: 1;
min-width: 300px;
}
.mc-results {
flex: 1;
min-width: 300px;
background-color: #f8f9fa;
border-radius: 8px;
padding: 20px;
border: 1px solid #dee2e6;
}
.mc-form-group {
margin-bottom: 15px;
}
.mc-form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
font-size: 14px;
}
.mc-input-wrapper {
position: relative;
}
.mc-input-wrapper input, .mc-input-wrapper select {
width: 100%;
padding: 10px 10px 10px 35px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.mc-input-wrapper select {
padding-left: 10px;
}
.mc-symbol {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-weight: bold;
}
.mc-btn {
width: 100%;
padding: 12px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}
.mc-btn:hover {
background-color: #219150;
}
.mc-result-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e9ecef;
}
.mc-result-row:last-child {
border-bottom: none;
margin-bottom: 0;
}
.mc-result-label {
color: #555;
font-size: 14px;
}
.mc-result-value {
font-weight: bold;
font-size: 18px;
color: #2c3e50;
}
.mc-total-payment {
background-color: #2c3e50;
color: white;
padding: 15px;
border-radius: 6px;
text-align: center;
margin-top: 20px;
}
.mc-total-payment .mc-tp-label {
font-size: 14px;
margin-bottom: 5px;
opacity: 0.9;
}
.mc-total-payment .mc-tp-value {
font-size: 32px;
font-weight: 800;
}
.mc-content {
padding: 20px 30px 40px;
border-top: 1px solid #eee;
color: #444;
line-height: 1.6;
}
.mc-content h3 {
color: #2c3e50;
margin-top: 25px;
}
.mc-error {
color: #e74c3c;
font-size: 13px;
margin-top: 5px;
display: none;
}
@media (max-width: 600px) {
.mc-container {
flex-direction: column;
}
}
function calculateMortgage() {
// 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 years = parseInt(document.getElementById('mc-loan-term').value);
var annualTax = parseFloat(document.getElementById('mc-property-tax').value);
var annualIns = parseFloat(document.getElementById('mc-insurance').value);
var monthlyHOA = parseFloat(document.getElementById('mc-hoa').value);
// Validation
if (isNaN(homePrice) || isNaN(downPayment) || isNaN(interestRate) || isNaN(years) || isNaN(annualTax) || isNaN(annualIns) || isNaN(monthlyHOA)) {
document.getElementById('mc-error-msg').style.display = 'block';
return;
} else {
document.getElementById('mc-error-msg').style.display = 'none';
}
// Core Calculations
var loanAmount = homePrice – downPayment;
// Handle edge case where down payment >= home price
if (loanAmount 0 && monthlyRate > 0) {
monthlyPI = loanAmount * (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / (Math.pow(1 + monthlyRate, numberOfPayments) – 1);
} else if (loanAmount > 0 && monthlyRate === 0) {
monthlyPI = loanAmount / numberOfPayments;
}
var monthlyTax = annualTax / 12;
var monthlyIns = annualIns / 12;
var totalMonthlyPayment = monthlyPI + monthlyTax + monthlyIns + monthlyHOA;
var totalInterest = (monthlyPI * numberOfPayments) – loanAmount;
if (totalInterest < 0) totalInterest = 0;
// Update UI
document.getElementById('res-loan-amount').innerHTML = formatCurrency(loanAmount);
document.getElementById('res-pi').innerHTML = formatCurrency(monthlyPI);
document.getElementById('res-tax').innerHTML = formatCurrency(monthlyTax);
document.getElementById('res-ins').innerHTML = formatCurrency(monthlyIns);
document.getElementById('res-hoa').innerHTML = formatCurrency(monthlyHOA);
document.getElementById('res-total-monthly').innerHTML = formatCurrency(totalMonthlyPayment);
document.getElementById('res-total-interest').innerHTML = formatCurrency(totalInterest);
}
function formatCurrency(num) {
return '$' + num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
// Initialize on load with default values
window.onload = function() {
calculateMortgage();
};
Mortgage Payment Calculator (PITI)
$
$
%
30 Years
20 Years
15 Years
10 Years
$
$
$
Please enter valid positive numbers.
Loan Amount
$280,000
Principal & Interest
$1,769.79
Property Tax (Monthly)
$375.00
Home Insurance (Monthly)
$100.00
HOA Fees
$0.00
Estimated Total Monthly Payment
$2,244.79
Total Interest over Loan Life: $357,123.45
How to Calculate Your Mortgage Payment (PITI)
Understanding the true cost of homeownership requires more than just knowing your purchase price. This Mortgage PITI Calculator breaks down the four critical components of your monthly payment: Principal, Interest, Taxes, and Insurance.
Most potential homebuyers focus solely on the principal and interest, often getting shocked when the final monthly bill arrives. Property taxes and homeowners insurance are typically held in escrow and added to your monthly mortgage bill, significantly increasing your financial obligation.
Understanding the Inputs
- Principal & Interest: Calculated based on your loan amount (Home Price minus Down Payment), interest rate, and loan term.
- Property Tax: Local governments assess this annually. We convert your annual input to a monthly obligation.
- Home Insurance: Lenders require hazard insurance to protect the asset. This varies by location and coverage level.
- HOA Fees: Homeowners Association fees are usually paid separately but are included here to give you a complete picture of your monthly housing costs.
How Interest Rates Impact Your Payment
Even a small fluctuation in interest rates can drastically change your buying power. For example, on a $300,000 loan, a 1% increase in interest rate can raise your monthly payment by over $150 and cost you tens of thousands of dollars in additional interest over the life of a 30-year loan. Use the calculator above to scenario-test different rates and see how they fit your budget.