Use this calculator to estimate how much you can afford to borrow for a mortgage. It considers your income, debts, and desired down payment to give you a ballpark figure.
function calculateMortgageAffordability() {
var annualIncome = parseFloat(document.getElementById("annualIncome").value);
var monthlyDebtPayments = parseFloat(document.getElementById("monthlyDebtPayments").value);
var downPayment = parseFloat(document.getElementById("downPayment").value);
var interestRate = parseFloat(document.getElementById("interestRate").value);
var loanTermYears = parseFloat(document.getElementById("loanTermYears").value);
var propertyTaxesAnnual = parseFloat(document.getElementById("propertyTaxesAnnual").value);
var homeInsuranceAnnual = parseFloat(document.getElementById("homeInsuranceAnnual").value);
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Clear previous results
// Basic validation
if (isNaN(annualIncome) || isNaN(monthlyDebtPayments) || isNaN(downPayment) || isNaN(interestRate) || isNaN(loanTermYears) || isNaN(propertyTaxesAnnual) || isNaN(homeInsuranceAnnual)) {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
// — Debt-to-Income (DTI) Ratio Calculation —
// Lenders typically look at two DTI ratios: Front-end (housing) and Back-end (total debt).
// For affordability, we'll use a common guideline of a maximum back-end DTI of 43%.
var maxBackEndDTI = 0.43;
var grossMonthlyIncome = annualIncome / 12;
// Maximum allowed total monthly debt payments (including PITI)
var maxTotalMonthlyDebt = grossMonthlyIncome * maxBackEndDTI;
// Maximum allowed monthly mortgage payment (P&I only)
var maxMortgagePaymentPI = maxTotalMonthlyDebt – monthlyDebtPayments;
if (maxMortgagePaymentPI 0) {
var factor = Math.pow(1 + monthlyInterestRate, numberOfPayments);
var numerator = monthlyInterestRate * factor;
var denominator = factor – 1;
var mortgagePaymentFactor = numerator / denominator;
// P = M / mortgagePaymentFactor
maxMortgageAmount = maxMortgagePaymentPI / mortgagePaymentFactor;
} else {
// Handle 0% interest rate scenario (unlikely for mortgages but for completeness)
maxMortgageAmount = maxMortgagePaymentPI * numberOfPayments;
}
// — Total Affordable Home Price —
// Total home price = Maximum Mortgage Amount + Down Payment
var affordableHomePrice = maxMortgageAmount + downPayment;
// — Additional calculations for context —
var monthlyPropertyTaxes = propertyTaxesAnnual / 12;
var monthlyHomeInsurance = homeInsuranceAnnual / 12;
var monthlyPITI = maxMortgagePaymentPI + monthlyPropertyTaxes + monthlyHomeInsurance; // This is the total estimated monthly housing cost based on the calculated max P&I
// — Display Results —
resultDiv.innerHTML += "
Estimated Affordability:
";
resultDiv.innerHTML += "Maximum Mortgage Amount You Could Afford: $" + maxMortgageAmount.toFixed(2) + "";
resultDiv.innerHTML += "Estimated Maximum Home Price You Could Afford: $" + affordableHomePrice.toFixed(2) + "";
resultDiv.innerHTML += "(This is based on a maximum back-end Debt-to-Income ratio of 43%, covering Principal & Interest, Taxes, Insurance, and your existing monthly debts.)";
resultDiv.innerHTML += "Estimated Total Monthly Housing Payment (PITI): $" + monthlyPITI.toFixed(2) + "";
resultDiv.innerHTML += "(Principal & Interest: $" + maxMortgagePaymentPI.toFixed(2) + ", Property Taxes: $" + monthlyPropertyTaxes.toFixed(2) + ", Home Insurance: $" + monthlyHomeInsurance.toFixed(2) + ")";
resultDiv.innerHTML += "Disclaimer: This is an estimate only and does not guarantee loan approval. Actual loan amounts and interest rates will depend on your specific financial situation, credit score, lender policies, and market conditions.";
}
.calculator-container {
font-family: sans-serif;
border: 1px solid #e0e0e0;
padding: 20px;
border-radius: 8px;
max-width: 600px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.calculator-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.form-group input[type="number"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
box-sizing: border-box; /* Important for padding */
}
.calculator-container button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.calculator-container button:hover {
background-color: #0056b3;
}
#result {
margin-top: 25px;
padding: 15px;
border: 1px dashed #ccc;
background-color: #fff;
border-radius: 4px;
}
#result h3 {
margin-top: 0;
color: #007bff;
margin-bottom: 15px;
}
#result p {
margin-bottom: 10px;
line-height: 1.5;
}
#result strong {
color: #333;
}