summaryrefslogtreecommitdiff
path: root/mortgage.html
blob: 07de66b31a28342584076125cfe2b72b4effacef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>

<head>
    <title>Mortgage Calculator</title>
    <style>
        #parameters {
            margin-top: 2em;
            display: grid;
            grid-template-columns: 10em min-content;
            column-gap: 1em;
            row-gap: 0.5em;
        }
        #parameters div {
            text-align: right;
        }
        #parameters input {
            width: 12em;
            text-align: right;
        }
        #results {
            margin-top: 2em;
        }
        #results-table {
            border: 1px solid;
            border-collapse: collapse;
        }
        #results-table th {
            padding-top: 0.5em;
            padding-bottom: 0.5em;
        }
        #results-table th, td {
            text-align: center;
            padding-left: 1em;
            padding-right: 1em;
        }
        #results-table tr:nth-child(even){
            background-color: #f2f2f2;
        }
        #results-table tr:hover {background-color: #ddd;}
    </style>
</head>

<body>
    <h1>Mortgage Calculator</h1>
    <div id="parameters">
        <div>Principal</div>
        <div><input id="principal" type="number" value="100000" onchange="update()"></div>
        <div>Annual Interest (%)</div>
        <div><input id="interest" type="number" value="5.0" onchange="update()"></div>
        <div>Installments</div>
        <div><input id="installments" type="number" value="300" onchange="update()"></div>
    </div>
    <div id="results">
        <table id="results-table">
            <tr>
                <th>Time</th>
                <th>Outstanding Debt</th>
                <th>Monthly Installment</th>
                <th>Interest Paid</th>
                <th>Amount Amortised</th>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="mortgage.js"></script>
</body>

</html>