Skip to content

Instantly share code, notes, and snippets.

@milnak

milnak/mortgage-calc.html

Last active March 28, 2025 22:07
Show Gist options
  • Save milnak/652f2b667632cf77baefd32620bdb2d1 to your computer and use it in GitHub Desktop.
Save milnak/652f2b667632cf77baefd32620bdb2d1 to your computer and use it in GitHub Desktop.
Download ZIP
Mortgage calculator written in HTML and JavaScript
Raw
mortgage-calc.html
<html>
<head>
<title>JavaScript Mortgage Calc</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
}
h2 {
color: #555;
border-bottom: 2px solid #ddd;
padding-bottom: 5px;
}
p {
color: #666;
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="text"]:focus {
border-color: #007bff;
outline: none;
}
input[type="text"][name="PI"],
input[type="text"][name="MT"],
input[type="text"][name="MI"],
input[type="text"][name="MP"] {
background-color: #f9f9f9;
cursor: not-allowed;
}
</style>
<script language="JavaScript">
function floor(number) {
//
// return two digits of precision
//
return Math.floor(number * 100) / 100;
}
function dosum() {
// P = principal, the initial amount of the loan
var P = document.temps.LA.value;
// I = the annual interest rate (from 1 to 100 percent)
var I = document.temps.IR.value;
// L = length, the length (in years) of the loan
// or at least the length over which the loan is amortized.
var L = document.temps.YR.value;
// Monthly interest = Interest rate / ( 12 * 100 )
var J = I / 1200;
// N = number of months over which loan is amortized = L x 12
var N = L * 12;
// M = monthly payment
//
// J
// M = P x ------------------------
// 1 - ( 1 + J ) ^ -N
var M = P * (J / (1 - Math.pow(1 + J, -N)))
document.temps.PI.value = floor(M)
document.temps.MT.value = floor(document.temps.AT.value / 12)
document.temps.MI.value = floor(document.temps.AI.value / 12)
document.temps.MP.value = floor(M + (document.temps.AT.value / 12) + (document.temps.AI.value / 12))
}
</script>
<body onload="dosum();">
<h1>Mortgage Calculator</h1>
<p>Modify values in input section to affect results...</p>
<form name="temps">
<!-- Input Section -->
<h2>Input</h2>
<table border="0" width="300">
<tr>
<td>Years: <INPUT type="text" onchange="dosum()" size="6" value="30" name="YR"></td>
</tr>
<tr>
<td>Interest: <INPUT type="text" onchange="dosum()" size="6" value="6.75" name="IR"></td>
</tr>
<tr>
<td>Loan Amount: <INPUT type="text" onchange="dosum()" size="6" value="250000" name="LA"></td>
</tr>
<tr>
<td>Annual Tax: <INPUT type="text" onchange="dosum()" size="6" value="1000" name="AT"></td>
</tr>
<tr>
<td>Annual Insurance: <INPUT type="text" onchange="dosum()" size="6" value="300" name="AI"></td>
</tr>
</table>
<p></p>
<!-- Results section -->
<h2>Results</h2>
<table border="0" width="300">
<tr>
<td>Monthly Prin + Int: <input type="text" size="10" name="PI"></td>
<tr>
<td>Monthly Tax: <INPUT type="text" size="10" name="MT"></td>
<tr>
<td>Monthly Ins: <INPUT type="text" size="10" name="MI"></td>
<tr>
<td>Total Payment: <INPUT type="text" size="10" name="MP"></td>
</tr>
</table>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment