191 lines
8.2 KiB
HTML
191 lines
8.2 KiB
HTML
<!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>
|
|
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/films/soil-contract/">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="/usda-loans.html">Understanding USDA Loans</a></nav></fort-nav>
|
|
<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> |