blob: d08863fe76fa2d0ccf2dab8629c387f83ffb1b1b (
plain) (
blame)
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="The 401k web app helps you calculate your projected 401k savings based on a few simple inputs. Just fill in the information and click the button!" />
<!-- icons -->
<link rel="apple-touch-icon" sizes="57x57" href="./assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/css/app.css" />
<title>401k Projections</title>
</head>
<body>
<div class="container">
<!-- main panel -->
<div class="mainCard card">
<div class="card-header text-center">
<h1 class="display-4">401k Projection App</h1>
<p class="lead">This tool will help you calculate future returns on your 401k plan.</p>
</div>
<div class="card-body">
<div class="container">
<form>
<div class="form-row">
<div class="col-md-6">
<label for="begBalance">Beginning Balance:</label>
<input id="begBalance" type="text" aria-label="Beginning Balance" class="form-control" placeholder="ex: 5600.00" />
</div>
<div class="col-md-6">
<label for="monthlyContr">Monthly Contribution:</label>
<input id="monthlyContr" type="text" aria-label="Monthly Contribution" class="form-control" placeholder="ex: 300.00" />
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label for="returnRate">Annual Rate of Return:</label>
<input id="returnRate" type="text" aria-label="Annual Rate of Return" class="form-control" placeholder="ex: 9.0">
</div>
<div class="col-md-6">
<label for="inflationRate">Annual Rate of Inflation:</label>
<input id="inflationRate" type="text" aria-label="Annual Rate of Inflation" class="form-control" placeholder="ex: 1.2">
</div>
</div>
</form>
<hr style="margin:2rem auto;">
<div class="form-row">
<div class="col-md-5">
<label for="years">I want to retire in this many years: </label>
<input id="years" class="form-control" placeholder="ex: 10" aria-labelledby="yearsLabel" data-com.bitwarden.browser.user-edited="yes">
<a href="#graphCard" class="btn btn-outline-primary mt-2 w-100" onclick="retirementYears()">Submit</a>
</div>
<div class="col-md-2 d-flex justify-content-center align-items-center py-3">
<p class="h3 text-center">← OR →</p>
</div>
<div class="col-md-5">
<label for="money">I want to retire with this much money:</label>
<input id="money" class="form-control" placeholder="ex: 50000" aria-labelledby="moneyLabel">
<a href="#graphCard" class="btn btn-outline-primary mt-2 w-100" onclick="retirementMoney()">Submit</a>
</div>
</div>
</div>
</div>
</div>
<!-- graph panel -->
<div id="graphCard" class="graphCard card">
<div class="card-header">
<h2 class="text-center">Projections Graph</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<div class="chartContainer" id="balChartContainer"></div>
</div>
<div class="col-lg-6">
<div class="chartContainer" id="intChartContainer"></div>
</div>
</div>
</div>
</div>
<!-- results table -->
<h2 id="infoTableHeading" class="text-center">Base Information</h2>
<table id="infoTable" class="infoTable table table-bordered">
<thead>
<tr>
<th>Beginning Balance</th>
<th>Monthly Contribution</th>
<th>Annual Rate of Return</th>
<th>Annual Rate of Inflation</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h2 id="resultsTableHeading" class="text-center">Future Calculations</h2>
<table class="resultsTable table table-striped table-bordered">
<thead class="thead">
<tr>
<th>Month</th>
<th>Interest Earned</th>
<th>Contribution</th>
<th>New Balance</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- JavaScript -->
<script src="./assets/js/jquery-3.5.1.min.js"></script>
<script src="./assets/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/plotly-1.58.0.min.js"></script>
<script src="./assets/js/app.js"></script>
</body>
</html>
|
