2026-08-18 13:08:11 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< style id = "fort-styles" >
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
< / style >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Mortgage Affordability Calculator< / title >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Mortgage Affordability Calculator" >
< meta property = "og:description" content = "Use our mortgage affordability calculator to estimate how much you can afford to borrow." >
< meta property = "og:image" content = "https://images.pexels.com/photos/34134899/pexels-photo-34134899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" >
< meta property = "og:url" content = "https://aisha-henry.4ort.net/mortgage-affordability-calculator.html" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "description" content = "Use our mortgage affordability calculator to estimate how much you can afford to borrow." >
< style >
body {
font-family: 'EB Garamond', serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
background-color: #f9f9f9;
}
header {
background-color: #4a6fa5;
color: white;
padding: 1rem;
text-align: center;
}
nav {
background-color: #3a5a8f;
padding: 0.5rem;
text-align: center;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
section {
margin-bottom: 2rem;
}
h1, h2, h3 {
color: #4a6fa5;
}
.pull-quote {
font-style: italic;
border-left: 4px solid #4a6fa5;
padding-left: 1rem;
margin: 1rem 0;
}
footer {
background-color: #4a6fa5;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
}
.image-container {
text-align: center;
margin: 2rem 0;
}
.image-container img {
max-width: 100%;
height: auto;
}
.calculator {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calculator label {
display: block;
margin-bottom: 0.5rem;
}
.calculator input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.calculator button {
background-color: #4a6fa5;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
.calculator button:hover {
background-color: #3a5a8f;
}
.result {
margin-top: 2rem;
padding: 1rem;
background-color: #f0f0f0;
border-radius: 4px;
}
< / style >
< script defer src = "https://analytics.4ort.xyz/script.js" data-website-id = "d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b" > < / script >
< / head >
< body >
< header >
< h1 > Mortgage Affordability Calculator< / h1 >
< / header >
2026-08-20 23:32:01 +02:00
< fort-nav > < nav class = "fort-nav" data-fort = "nav" > < a href = "/films/soil-contract/" > Index< / a > < a href = "/films/the-true-cost-of-home/" > Index< / a > < a href = "/closing-checklist.html" > Closing Checklist< / a > < a href = "/flood-risk.html" > Evaluating Flood Risk< / a > < a href = "/first-time-homebuyers-companion.html" > First-Time Homebuyer's Union County Companion< / a > < a href = "/pre-approval.html" > Getting Pre-Approved< / a > < a href = "/mortgage-affordability-calculator.html" class = "active" aria-current = "page" > Mortgage Affordability Calculator< / a > < a href = "/negotiating-repairs.html" > Negotiating Repairs< / a > < a href = "/soil-surveys.html" > Reading Soil Surveys< / a > < a href = "/the-true-cost-of-home.html" > The True Cost of Home< / a > < a href = "/usda-loans.html" > Understanding USDA Loans< / a > < / nav > < / fort-nav >
2026-08-18 13:08:11 +02:00
< main >
< div class = "image-container" >
< img src = "https://images.pexels.com/photos/34134899/pexels-photo-34134899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt = "Keys and miniature houses" >
< / div >
< section >
< h2 > Calculate Your Mortgage Affordability< / h2 >
< p > Use our mortgage affordability calculator to estimate how much you can afford to borrow.< / p >
< div class = "calculator" >
< label for = "income" > Annual Income:< / label >
< input type = "number" id = "income" name = "income" >
< label for = "debt" > Monthly Debt Payments:< / label >
< input type = "number" id = "debt" name = "debt" >
< label for = "down-payment" > Down Payment:< / label >
< input type = "number" id = "down-payment" name = "down-payment" >
< label for = "interest-rate" > Interest Rate:< / label >
< input type = "number" id = "interest-rate" name = "interest-rate" step = "0.01" >
< label for = "loan-term" > Loan Term (years):< / label >
< input type = "number" id = "loan-term" name = "loan-term" >
< button onclick = "calculateAffordability()" > Calculate< / button >
< div class = "result" id = "result" > < / div >
< / div >
< / section >
< / main >
< footer >
< p > © 2026 Aisha Henry. All rights reserved.< / p >
< / footer >
< script >
function calculateAffordability() {
const income = parseFloat(document.getElementById('income').value);
const debt = parseFloat(document.getElementById('debt').value);
const downPayment = parseFloat(document.getElementById('down-payment').value);
const interestRate = parseFloat(document.getElementById('interest-rate').value) / 100;
const loanTerm = parseFloat(document.getElementById('loan-term').value);
const monthlyIncome = income / 12;
const maxDebtRatio = 0.36;
const maxDebtPayment = monthlyIncome * maxDebtRatio;
const principal = downPayment;
const monthlyInterestRate = interestRate / 12;
const numberOfPayments = loanTerm * 12;
const monthlyPayment = (principal * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1);
const totalDebtPayment = debt + monthlyPayment;
const resultDiv = document.getElementById('result');
if (totalDebtPayment > maxDebtPayment) {
resultDiv.innerHTML = `Your total monthly debt payment of $${totalDebtPayment.toFixed(2)} exceeds the recommended maximum of $${maxDebtPayment.toFixed(2)}.`;
} else {
resultDiv.innerHTML = `You can afford a monthly mortgage payment of $${monthlyPayment.toFixed(2)}.`;
}
}
< / script >
< / body >
< / html >
