diff options
Diffstat (limited to 'mortgage.html')
| -rw-r--r-- | mortgage.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/mortgage.html b/mortgage.html new file mode 100644 index 0000000..07de66b --- /dev/null +++ b/mortgage.html | |||
| @@ -0,0 +1,68 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html> | ||
| 3 | |||
| 4 | <head> | ||
| 5 | <title>Mortgage Calculator</title> | ||
| 6 | <style> | ||
| 7 | #parameters { | ||
| 8 | margin-top: 2em; | ||
| 9 | display: grid; | ||
| 10 | grid-template-columns: 10em min-content; | ||
| 11 | column-gap: 1em; | ||
| 12 | row-gap: 0.5em; | ||
| 13 | } | ||
| 14 | #parameters div { | ||
| 15 | text-align: right; | ||
| 16 | } | ||
| 17 | #parameters input { | ||
| 18 | width: 12em; | ||
| 19 | text-align: right; | ||
| 20 | } | ||
| 21 | #results { | ||
| 22 | margin-top: 2em; | ||
| 23 | } | ||
| 24 | #results-table { | ||
| 25 | border: 1px solid; | ||
| 26 | border-collapse: collapse; | ||
| 27 | } | ||
| 28 | #results-table th { | ||
| 29 | padding-top: 0.5em; | ||
| 30 | padding-bottom: 0.5em; | ||
| 31 | } | ||
| 32 | #results-table th, td { | ||
| 33 | text-align: center; | ||
| 34 | padding-left: 1em; | ||
| 35 | padding-right: 1em; | ||
| 36 | } | ||
| 37 | #results-table tr:nth-child(even){ | ||
| 38 | background-color: #f2f2f2; | ||
| 39 | } | ||
| 40 | #results-table tr:hover {background-color: #ddd;} | ||
| 41 | </style> | ||
| 42 | </head> | ||
| 43 | |||
| 44 | <body> | ||
| 45 | <h1>Mortgage Calculator</h1> | ||
| 46 | <div id="parameters"> | ||
| 47 | <div>Principal</div> | ||
| 48 | <div><input id="principal" type="number" value="100000" onchange="update()"></div> | ||
| 49 | <div>Annual Interest (%)</div> | ||
| 50 | <div><input id="interest" type="number" value="5.0" onchange="update()"></div> | ||
| 51 | <div>Installments</div> | ||
| 52 | <div><input id="installments" type="number" value="300" onchange="update()"></div> | ||
| 53 | </div> | ||
| 54 | <div id="results"> | ||
| 55 | <table id="results-table"> | ||
| 56 | <tr> | ||
| 57 | <th>Time</th> | ||
| 58 | <th>Outstanding Debt</th> | ||
| 59 | <th>Monthly Installment</th> | ||
| 60 | <th>Interest Paid</th> | ||
| 61 | <th>Amount Amortised</th> | ||
| 62 | </tr> | ||
| 63 | </table> | ||
| 64 | </div> | ||
| 65 | <script type="text/javascript" src="mortgage.js"></script> | ||
| 66 | </body> | ||
| 67 | |||
| 68 | </html> | ||