-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
245 lines (231 loc) · 11.7 KB
/
index.html
File metadata and controls
245 lines (231 loc) · 11.7 KB
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!--
███╗ ██╗███████╗███████╗████████╗███████╗ ██████╗ ██████╗
████╗ ██║██╔════╝██╔════╝╚══██╔══╝██╔════╝██╔════╝ ██╔════╝
██╔██╗ ██║█████╗ ███████╗ ██║ █████╗ ██║ ███╗██║ ███╗
██║╚██╗██║██╔══╝ ╚════██║ ██║ ██╔══╝ ██║ ██║██║ ██║
██║ ╚████║███████╗███████║ ██║ ███████╗╚██████╔╝╚██████╔╝
╚═╝ ╚═══╝╚══════╝╚══════╝ ╚═╝ ╚══════╝ ╚═════╝ ╚═════╝
A calculator that determines the future value of your retirement fund.
-
Author:
sorzkode
https://github.com/sorzkode
MIT License
Copyright (c) 2025 sorzkode
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>nestEgg</title>
<script defer src="scripts/nestEgg.js"></script>
<script defer src="scripts/clearForm.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="nestFAVI.png">
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div>
<form id="myForm" role="form" aria-label="Retirement Calculator">
<div class="row">
<div>
<h1 class="text-center">
<img src="nestEgg.png" alt="nestEgg Calculator Logo">nestEgg Calculator
<button type="button" class="info-btn" onclick="openInfoModal()" title="How calculations work" aria-label="Information about calculations">ℹ️</button>
</h1>
<div class="form-group">
<label for="current-age" id="current-age-label">Current Age<span style="color: rgb(189, 0, 0);" aria-label="required">*</span></label>
<div class="input-group">
<span class="input-group-addon" aria-hidden="true">⏳</span>
<input type="number"
class="form-control"
id="current-age"
aria-labelledby="current-age-label"
aria-required="true"
min="15"
max="85"
placeholder="30"
title="Your Age. Range: 15 - 85"
required>
</div>
</div>
<div class="form-group">
<label for="retirement-age">Planned Retirement Age<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">⌛</span>
<input type="number" class="form-control" id="retirement-age" min="15" max="95" placeholder="65" title="Your Retirement Age. Range: 15 - 95" required>
</div>
</div>
<div class="form-group">
<label for="current-salary">Current Annual Salary<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="current-salary" placeholder="50000" title="Your Salary as a Whole Number" required>
</div>
</div>
<div class="form-group">
<label for="salary-increase">Expected Annual Salary Increase<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">↑</span>
<input type="number" class="form-control" id="salary-increase" placeholder="2" title="Salary % Increase as a Whole Number" required>
</div>
<span class="user-hint" style="color: yellow;">Salary % Increase as a Whole Number</span>
</div>
<div class="form-group">
<label for="employee-cont">Your Retirement Contributions<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">💰</span>
<input type="number" class="form-control" id="employee-cont" min="0" max="100" placeholder="9" title="Contribution % as a Whole Number" required>
</div>
<span class="user-hint" style="color: yellow;">Contribution % as a Whole Number</span>
</div>
<div class="form-group">
<label for="employer-cont">Employer Match<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">🏢</span>
<input type="number" class="form-control" id="employer-cont" min="0" max="100" placeholder="3" title="Employer Match % as a Whole Number" required>
</div>
<span class="user-hint" style="color: yellow;">Employer Match % as a Whole Number</span>
</div>
<div class="form-group">
<label for="interest-rate">Expected Rate of Return<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">%</span>
<input type="number" class="form-control" id="interest-rate" min="0" max="100" placeholder="6" title="Rate of Return % as a Whole Number" required>
</div>
<span class="user-hint" style="color: yellow;">Rate of Return % as a Whole Number</span>
</div>
<div class="form-group">
<label for="inflation-rate">Expected Inflation Rate<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">🎈</span>
<input type="number" class="form-control" id="inflation-rate" min="1" max="15" placeholder="3" title="Inflation Rate % as a Whole Number" required>
</div>
<span class="user-hint" style="color: yellow;">Inflation Rate % as a Whole Number</span>
</div>
<div class="form-group">
<label for="current-savings">Current Savings<span style="color: rgb(189, 0, 0);">*</span></label>
<div class="input-group">
<span class="input-group-addon">🐷</span>
<input type="number" class="form-control" id="current-savings" placeholder="75000" title="Your Savings as a Whole Number" required>
</div>
</div>
<div class="form-group results-container" id="results-container" style="display: none;">
<h4 class="results-title">Your Retirement Projection</h4>
<div class="result-row result-total">
<span class="result-label">Total at Retirement:</span>
<span class="result-value" id="results-total">$0</span>
</div>
<div class="result-breakdown">
<div class="result-row">
<span class="result-label">Initial Savings:</span>
<span class="result-value" id="results-initial">$0</span>
</div>
<div class="result-row">
<span class="result-label">Your Contributions:</span>
<span class="result-value" id="results-employee">$0</span>
</div>
<div class="result-row">
<span class="result-label">Employer Contributions:</span>
<span class="result-value" id="results-employer">$0</span>
</div>
<div class="result-row">
<span class="result-label">Investment Growth:</span>
<span class="result-value" id="results-interest">$0</span>
</div>
</div>
<div class="result-row result-inflation">
<span class="result-label">Purchasing Power (Today's $):</span>
<span class="result-value" id="results-inflation-adjusted">$0</span>
</div>
</div>
<!-- Simple Results Display (fallback/backwards compatibility) -->
<div class="form-group" id="simple-results" style="text-align: center;">
<label for="results"><span style="color:rgba(31%, 78%, 47%, 1);"><h4>Approximate nestEgg...</span></h4></label>
<div class="input-group">
<span class="input-group-addon" style="margin-right: 20px;">🥚</span>
<h4 id="results">$</h4>
</div>
</div>
<div style="text-align: right;">
<button type="button" class="btn btn-primary" onclick="nestEgg()"><span class="btn-primary-addon"><strong>CALCULATE</strong> 🔢</span></button>
<button type="button" class="btn btn-secondary" onclick="clearForm()"><span class="btn-secondary-addon"><strong>CLEAR</strong> ✖</span></button>
</div>
</div>
</div>
</form>
</div>
<!-- Information Modal -->
<div id="infoModal" class="modal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">How the nestEgg Calculator Works</h2>
<button type="button" class="close-btn" onclick="closeInfoModal()" aria-label="Close">×</button>
</div>
<div class="modal-body">
<h3>📊 Calculation Methodology</h3>
<div class="info-section">
<h4>1. Salary Projection</h4>
<p>Your salary is projected year-by-year using compound growth:</p>
<code>Salary(year) = Current Salary × (1 + Annual Increase)^years</code>
<p class="example">Example: $50,000 salary with 2% annual increase becomes $51,000 in year 1, $52,020 in year 2, etc.</p>
</div>
<div class="info-section">
<h4>2. Annual Contributions</h4>
<p>Each year, contributions are calculated based on your projected salary:</p>
<code>Employee Contribution = Salary × Your Contribution %</code>
<code>Employer Match = Salary × Employer Match %</code>
<code>Total Contribution = Employee + Employer</code>
<p class="example">Example: At $50,000 salary with 9% employee and 3% employer match = $4,500 + $1,500 = $6,000/year</p>
</div>
<div class="info-section">
<h4>3. Investment Growth</h4>
<p>Your account balance grows annually based on your expected rate of return:</p>
<code>Interest = (Previous Balance + This Year's Contributions) × Rate of Return</code>
<p class="example">Example: $100,000 balance + $6,000 contributions with 6% return = $6,360 growth</p>
</div>
<div class="info-section">
<h4>4. Year-by-Year Accumulation</h4>
<p>The calculator runs this process for each year until retirement:</p>
<ol>
<li>Calculate your salary for that year</li>
<li>Calculate contributions based on that salary</li>
<li>Calculate investment growth on your balance</li>
<li>Add contributions and growth to your balance</li>
<li>Repeat for the next year</li>
</ol>
</div>
<div class="info-section">
<h4>5. Inflation Adjustment</h4>
<p>The "Purchasing Power" value shows what your final amount would be worth in today's dollars:</p>
<code>Real Value = Final Amount / (1 + Inflation Rate)^years</code>
<p class="example">Example: $1,000,000 in 30 years with 3% inflation = $412,000 in today's purchasing power</p>
</div>
<div class="info-section">
<h4>📈 What You See in Results</h4>
<ul>
<li><strong>Total at Retirement:</strong> Your projected account balance (nominal dollars)</li>
<li><strong>Initial Savings:</strong> What you started with</li>
<li><strong>Your Contributions:</strong> Sum of all your contributions over the years</li>
<li><strong>Employer Contributions:</strong> Sum of all employer match contributions</li>
<li><strong>Investment Growth:</strong> Total returns from your investments</li>
<li><strong>Purchasing Power:</strong> What the total is worth in today's dollars</li>
</ul>
</div>
<div class="info-section disclaimer">
<h4>⚠️ Important Notes</h4>
<ul>
<li>This calculator provides estimates based on your inputs</li>
<li>Actual returns will vary and are not guaranteed</li>
<li>Does not account for taxes, fees, or market volatility</li>
<li>Consult with a financial advisor for personalized advice</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeInfoModal()">Close</button>
</div>
</div>
</div>
</body>
</html>