krz/401k
clone: git clone https://gitbay.org/krz/401k.git
main: index.html · raw
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="description" content="Calculate your projected 401k savings based on a few simple inputs.">
8 <!-- icons -->
9 <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-icon-180x180.png">
10 <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
11 <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
12 <link rel="manifest" href="./assets/favicon/manifest.json">
13 <meta name="theme-color" content="#4f6ef7">
14 <!-- styles -->
15 <link rel="stylesheet" href="./assets/css/app.css">
16 <title>401k Projections</title>
17</head>
18
19<body>
20 <div class="app-container">
21
22 <header class="app-header">
23 <h1>401k Projection App</h1>
24 <p>Calculate your future 401k balance based on a few simple inputs.</p>
25 </header>
26
27 <!-- inputs panel -->
28 <section class="panel" aria-label="Plan inputs">
29 <p class="section-label">Your plan</p>
30 <div class="form-grid">
31 <div class="field">
32 <label for="begBalance">Beginning Balance</label>
33 <input id="begBalance" type="number" min="0" step="0.01" placeholder="5600.00">
34 </div>
35 <div class="field">
36 <label for="monthlyContr">Monthly Contribution</label>
37 <input id="monthlyContr" type="number" min="0" step="0.01" placeholder="300.00">
38 </div>
39 <div class="field">
40 <label for="returnRate">Annual Rate of Return (%)</label>
41 <input id="returnRate" type="number" min="0" step="0.01" placeholder="9.0">
42 </div>
43 <div class="field">
44 <label for="inflationRate">Annual Rate of Inflation (%)</label>
45 <input id="inflationRate" type="number" min="0" step="0.01" placeholder="1.2">
46 </div>
47 </div>
48
49 <div class="divider">Calculate by</div>
50
51 <div class="submit-grid">
52 <div class="submit-group">
53 <label for="years">Years until retirement</label>
54 <input id="years" type="number" min="1" step="1" placeholder="10">
55 <button type="button" class="btn-primary" onclick="retirementYears()">Calculate</button>
56 </div>
57 <div class="submit-group">
58 <label for="money">Target retirement amount ($)</label>
59 <input id="money" type="number" min="1" step="1" placeholder="500000">
60 <button type="button" class="btn-primary" onclick="retirementMoney()">Calculate</button>
61 </div>
62 </div>
63 </section>
64
65 <!-- graph panel -->
66 <section id="graphCard" class="panel" aria-label="Projections graph">
67 <p class="section-label">Projections</p>
68 <div class="chart-grid">
69 <div class="chartContainer" id="balChartContainer"></div>
70 <div class="chartContainer" id="intChartContainer"></div>
71 </div>
72 </section>
73
74 <!-- summary table -->
75 <div id="infoTableSection" class="panel table-section">
76 <h2>Base Information</h2>
77 <div style="overflow-x:auto">
78 <table class="data-table" id="infoTable">
79 <thead>
80 <tr>
81 <th scope="col">Beginning Balance</th>
82 <th scope="col">Monthly Contribution</th>
83 <th scope="col">Annual Return</th>
84 <th scope="col">Annual Inflation</th>
85 </tr>
86 </thead>
87 <tbody></tbody>
88 </table>
89 </div>
90 </div>
91
92 <!-- results table -->
93 <div id="resultsTableSection" class="panel table-section">
94 <h2>Month-by-Month Breakdown</h2>
95 <div style="overflow-x:auto">
96 <table class="data-table resultsTable">
97 <thead>
98 <tr>
99 <th scope="col">Month</th>
100 <th scope="col">Interest Earned</th>
101 <th scope="col">Contribution</th>
102 <th scope="col">New Balance</th>
103 </tr>
104 </thead>
105 <tbody></tbody>
106 </table>
107 </div>
108 </div>
109
110 </div>
111
112 <!-- Plotly basic dist (~390 KB gz) via jsDelivr -->
113 <script src="https://cdn.jsdelivr.net/npm/plotly.js-basic-dist-min@2.35.2/plotly-basic.min.js"
114 integrity="sha256-E4wugQFLl53ACGepPaVbdgWhdJXueN16+0M7fwId/Po="
115 crossorigin="anonymous"></script>
116 <script src="./assets/js/app.js"></script>
117</body>
118
119</html>