Mortgage Affordability Calculator
This calculator helps you estimate how much you might be able to borrow for a mortgage based on your income,
debts, and down payment. It's important to remember that this is an estimate, and your actual borrowing
capacity will be determined by a mortgage lender after a full assessment of your financial situation.
Lenders typically look at your debt-to-income ratio (DTI), credit score, employment history, and the
property's value.
.calculator-container {
font-family: sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.calculator-title {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.calculator-description {
color: #555;
line-height: 1.6;
margin-bottom: 25px;
text-align: justify;
}
.calculator-form {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 8px;
font-weight: bold;
color: #444;
}
.form-group input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
box-sizing: border-box;
}
.form-group input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.calculator-button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease;
width: 100%;
}
.calculator-button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 25px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1.1em;
text-align: center;
color: #333;
min-height: 50px; /* To prevent layout shift */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; /* Allow wrapping for long results */
}
.calculator-result strong {
color: #007bff;
font-size: 1.3em;
margin: 0 5px;
}
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 loanTerm = parseFloat(document.getElementById("loanTerm").value);
var resultElement = document.getElementById("result");
resultElement.innerHTML = ""; // Clear previous results
// Input validation
if (isNaN(annualIncome) || annualIncome <= 0 ||
isNaN(monthlyDebtPayments) || monthlyDebtPayments < 0 ||
isNaN(downPayment) || downPayment < 0 ||
isNaN(interestRate) || interestRate <= 0 ||
isNaN(loanTerm) || loanTerm <= 0) {
resultElement.innerHTML = "Please enter valid positive numbers for all fields.";
return;
}
// Common lender guidelines:
// PITI (Principal, Interest, Taxes, Insurance) should ideally not exceed 28% of gross monthly income.
// Total debt payments (including PITI) should not exceed 36% of gross monthly income.
// We will focus on the total debt payment limit to estimate maximum loan amount.
var grossMonthlyIncome = annualIncome / 12;
var maxTotalMonthlyObligations = grossMonthlyIncome * 0.36; // 36% DTI ratio guideline
// Subtract existing monthly debt payments from the maximum allowed total monthly obligations
var maxMonthlyMortgagePayment = maxTotalMonthlyObligations – monthlyDebtPayments;
// Ensure maxMonthlyMortgagePayment is not negative
if (maxMonthlyMortgagePayment 0 && numberOfPayments > 0) {
var factor = Math.pow(1 + monthlyInterestRate, numberOfPayments);
// Rearranging the formula to solve for P: P = M * [ (1 + i)^n – 1] / [ i(1 + i)^n ]
maximumLoanAmount = maxMonthlyMortgagePayment * (factor – 1) / (monthlyInterestRate * factor);
} else if (maxMonthlyMortgagePayment > 0) {
// If interest rate is 0 or loan term is 0 but there's a positive allowed payment,
// this scenario is generally not realistic for a mortgage, but we can represent it.
// A 0 interest rate would imply an unlimited loan for a finite payment, or vice-versa.
// For practical purposes, if rate is 0, monthly payment is just P/n.
// If term is 0, it's not a loan. We'll set to 0 for simplicity in invalid cases.
if (monthlyInterestRate === 0 && numberOfPayments > 0) {
maximumLoanAmount = maxMonthlyMortgagePayment * numberOfPayments;
} else {
maximumLoanAmount = 0;
}
}
// Maximum affordable home price is the loan amount + down payment
var maxAffordableHomePrice = maximumLoanAmount + downPayment;
// Display the results
var formattedMaxHomePrice = maxAffordableHomePrice.toLocaleString(undefined, {
style: 'currency',
currency: 'USD'
});
var formattedMaxLoanAmount = maximumLoanAmount.toLocaleString(undefined, {
style: 'currency',
currency: 'USD'
});
var formattedMaxMonthlyPayment = maxMonthlyMortgagePayment.toLocaleString(undefined, {
style: 'currency',
currency: 'USD'
});
resultElement.innerHTML =
"Based on your inputs and common lender guidelines:" +
"Estimated Maximum Home Price You Can Afford:
" + formattedMaxHomePrice + "" +
"Estimated Maximum Loan Amount:
" + formattedMaxLoanAmount + "" +
"Estimated Maximum P&I Payment:
" + formattedMaxMonthlyPayment + "" +
"(This estimate excludes property taxes, homeowners insurance, and PMI, which will increase your total monthly housing cost.)";
}