Please enter valid positive numbers for all fields.
Maximum Home Price
$0
Max Monthly Payment
$0
Loan Amount
$0
How Much House Can I Afford?
Determining your budget is the critical first step in the home-buying process. This Mortgage Affordability Calculator uses the standard debt-to-income (DTI) ratios preferred by most lenders to estimate the maximum home price you can comfortably handle.
Understanding the 28/36 Rule
Financial institutions typically use two ratios to determine lending limits:
The Front-End Ratio (28%): Lenders generally prefer that your monthly housing costs (principal, interest, taxes, and insurance) do not exceed 28% of your gross monthly income.
The Back-End Ratio (36%): Your total monthly debt payments (including your future mortgage, credit cards, student loans, and car payments) should not exceed 36% of your gross monthly income.
This calculator determines the lower of these two limits to ensure you don't overextend your finances.
Factors Influencing Your Affordability
Several key variables impact your purchasing power:
Down Payment: A larger down payment reduces the loan amount required, allowing you to purchase a more expensive home for the same monthly payment. It also builds immediate equity.
Interest Rate: Even a small difference in interest rates can significantly affect your monthly payment. Lower rates increase your purchasing power.
Existing Debt: Reducing monthly obligations like credit card balances or car loans frees up income that can be applied toward a mortgage, increasing your affordability.
Loan Term: A 30-year term offers lower monthly payments compared to a 15-year term, typically allowing you to qualify for a higher loan amount, though you will pay more in interest over time.
Next Steps
While this calculator provides a solid estimate, actual qualification depends on your credit score, employment history, and current market conditions. We recommend getting pre-approved by a lender to confirm your specific budget before house hunting.
function calculateAffordability() {
// 1. Get Input Values
var annualIncome = parseFloat(document.getElementById('annualIncome').value);
var monthlyDebts = parseFloat(document.getElementById('monthlyDebts').value);
var downPayment = parseFloat(document.getElementById('downPayment').value);
var interestRate = parseFloat(document.getElementById('interestRate').value);
var loanTermYears = parseFloat(document.getElementById('loanTerm').value);
// 2. Validation
var errorMsg = document.getElementById('error-message');
var resultsDiv = document.getElementById('calc-results');
if (isNaN(annualIncome) || annualIncome <= 0 ||
isNaN(interestRate) || interestRate <= 0 ||
isNaN(downPayment) || downPayment < 0) {
errorMsg.style.display = 'block';
resultsDiv.style.display = 'none';
return;
}
// Handle empty debt as 0
if (isNaN(monthlyDebts)) {
monthlyDebts = 0;
}
errorMsg.style.display = 'none';
// 3. Calculation Logic
var monthlyIncome = annualIncome / 12;
// Front-end Ratio (Housing only) – 28% rule
var maxHousingPaymentFront = monthlyIncome * 0.28;
// Back-end Ratio (Total Debt) – 36% rule
var maxTotalDebtPayment = monthlyIncome * 0.36;
var maxHousingPaymentBack = maxTotalDebtPayment – monthlyDebts;
// The limiting factor is the lower of the two
var maxMonthlyPayment = Math.min(maxHousingPaymentFront, maxHousingPaymentBack);
// If debts are too high, affordability might be zero or negative
if (maxMonthlyPayment 0) {
if (r === 0) {
maxLoanAmount = maxMonthlyPayment * n;
} else {
maxLoanAmount = maxMonthlyPayment * ((1 – Math.pow(1 + r, -n)) / r);
}
}
// Max Home Price = Loan Amount + Down Payment
var maxHomePrice = maxLoanAmount + downPayment;
// 4. Formatting and Display
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0
});
document.getElementById('maxHomePrice').innerHTML = formatter.format(maxHomePrice);
document.getElementById('maxMonthlyPayment').innerHTML = formatter.format(maxMonthlyPayment) + " / mo";
document.getElementById('loanAmountResult').innerHTML = formatter.format(maxLoanAmount);
resultsDiv.style.display = 'block';
}