initial version
This commit is contained in:
+165
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Net Worth Projection Calculator</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Net Worth Projection Calculator</h1>
|
||||
<p class="subtitle">Simulate your net worth over a 30-year period</p>
|
||||
|
||||
<form id="calculator-form">
|
||||
<div class="card">
|
||||
<h2>Portfolio Values</h2>
|
||||
<div class="input-grid">
|
||||
<div class="input-group">
|
||||
<label for="pretax-value">Pre-tax Market Value</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="pretax-value" inputmode="numeric" data-dollar value="1,500,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="aftertax-value">After-tax Market Value</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="aftertax-value" inputmode="numeric" data-dollar value="1,500,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="roth-value">Roth Market Value</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="roth-value" inputmode="numeric" data-dollar value="500,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="realestate-value">Real Estate Value</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="realestate-value" inputmode="numeric" data-dollar value="1,200,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Assumptions</h2>
|
||||
<div class="input-grid">
|
||||
<div class="input-group">
|
||||
<label for="inflation">Inflation Factor</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="number" id="inflation" value="3.0" min="0" max="20" step="0.1">
|
||||
<span class="input-suffix">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="ror">Rate of Return</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="number" id="ror" value="7.0" min="-20" max="50" step="0.1">
|
||||
<span class="input-suffix">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="tax-rate">Pre-tax Withdrawal Tax Rate</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="number" id="tax-rate" value="25.0" min="0" max="100" step="0.1">
|
||||
<span class="input-suffix">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Annual Spending (Year 1)</h2>
|
||||
<div class="input-grid">
|
||||
<div class="input-group">
|
||||
<label for="pretax-spending">Pre-tax Spending</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="pretax-spending" inputmode="numeric" data-dollar value="75,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="aftertax-spending">After-tax Spending</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="aftertax-spending" inputmode="numeric" data-dollar value="100,000" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="roth-spending">Roth Spending</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-prefix">$</span>
|
||||
<input type="text" id="roth-spending" inputmode="numeric" data-dollar value="0" min="0" step="1000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-calculate">Calculate</button>
|
||||
</form>
|
||||
|
||||
<div id="results" class="results hidden">
|
||||
<div class="card">
|
||||
<h2>Net Worth Projection</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="projection-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Year-by-Year Breakdown (With Inflation)</h2>
|
||||
<div class="table-wrapper">
|
||||
<table id="results-table-inflation">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Year</th>
|
||||
<th>Pre-tax</th>
|
||||
<th>After-tax</th>
|
||||
<th>Roth</th>
|
||||
<th>Real Estate</th>
|
||||
<th>Total Net Worth</th>
|
||||
<th>YoY Growth</th>
|
||||
<th>Pre-tax Spend</th>
|
||||
<th>After-tax Spend</th>
|
||||
<th>Roth Spend</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Year-by-Year Breakdown (No Inflation)</h2>
|
||||
<div class="table-wrapper">
|
||||
<table id="results-table-noinflation">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Year</th>
|
||||
<th>Pre-tax</th>
|
||||
<th>After-tax</th>
|
||||
<th>Roth</th>
|
||||
<th>Real Estate</th>
|
||||
<th>Total Net Worth</th>
|
||||
<th>YoY Growth</th>
|
||||
<th>Pre-tax Spend</th>
|
||||
<th>After-tax Spend</th>
|
||||
<th>Roth Spend</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user