fabian/homepage
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity

triforce-strategies: add S&P 500 vs anythingn calculator

Browse source 
claude helped with this
This commit is contained in:
Fabian Montero 2026-03-25 20:48:30 -06:00
parent 81b79a225f
commit d19f970d48
Signed by: fabian
GPG key ID: 3EDA9AE3937CCDE3
6 changed files with 969 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

146
templates/shortcodes/fund_comparison.html Normal file
View file

@ -0,0 +1,146 @@
<div class="fund-comparison-container">
<noscript>
<div class="noscript-warning">
This calculator requires JavaScript to function.
</div>
</noscript>
<form id="fund-comparison-form" class="fund-comparison-form">
<div class="form-section">
<h3>S&P 500 Index Fund</h3>
<div class="form-group">
<label for="sp500-return">Expected yearly return (%)</label>
<input type="number" id="sp500-return" value="10" step="0.1" required>
</div>
<div class="form-group">
<label for="sp500-volatility">Volatility / std dev (%)</label>
<input type="number" id="sp500-volatility" value="15" step="0.1" required>
</div>
<div class="form-group">
<label for="sp500-expense">Expense ratio (%)</label>
<input type="number" id="sp500-expense" value="0.03" step="0.01" required>
</div>
</div>
<div class="form-section">
<h3>Compared Fund</h3>
<div class="form-group">
<label for="compared-return">Expected yearly return (%)</label>
<input type="number" id="compared-return" value="7" step="0.1" required>
</div>
<div class="form-group">
<label for="compared-volatility">Volatility / std dev (%)</label>
<input type="number" id="compared-volatility" value="10" step="0.1" required>
</div>
<div class="form-group">
<label for="compared-admin-fee">Admin fee (% yearly)</label>
<input type="number" id="compared-admin-fee" value="1" step="0.01">
</div>
<div class="form-group">
<label for="compared-capital-gains">Capital gains tax at withdrawal (%)</label>
<input type="number" id="compared-capital-gains" value="0" step="0.1">
</div>
</div>
<div class="form-section form-section-full">
<h3>Investment Parameters</h3>
<div class="form-row">
<div class="form-group">
<label for="time-frame">Time frame (years)</label>
<input type="number" id="time-frame" value="20" min="1" max="50" required>
</div>
<div class="form-group">
<label for="monthly-deposit">Monthly deposit ($)</label>
<input type="number" id="monthly-deposit" value="500" min="1" required>
</div>
</div>
<div class="checkbox-group">
<input type="checkbox" id="use-monte-carlo" checked>
<label for="use-monte-carlo">Use Monte Carlo simulation (1000 runs)</label>
</div>
<button type="submit" class="calculate-btn">Calculate</button>
</div>
</form>
<div class="chart-container">
<canvas id="fund-comparison-chart"></canvas>
</div>
<div class="summary-section">
<h3>Summary</h3>
<table class="summary-table">
<thead>
<tr>
<th></th>
<th>S&P 500 Fund</th>
<th>Compared Fund</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Deposits</td>
<td colspan="2" id="total-deposits">-</td>
</tr>
<tr>
<td>Final Value (median)</td>
<td id="sp500-final">-</td>
<td id="compared-final">-</td>
</tr>
<tr>
<td>Total Gain</td>
<td id="sp500-gain">-</td>
<td id="compared-gain">-</td>
</tr>
<tr>
<td>Return Multiple</td>
<td id="sp500-multiple">-</td>
<td id="compared-multiple">-</td>
</tr>
</tbody>
</table>
</div>
<div id="percentiles-section" class="summary-section">
<details class="percentiles-details">
<summary>Percentile Breakdown</summary>
<table class="summary-table percentiles-table">
<thead>
<tr>
<th>Percentile</th>
<th>S&P 500 Fund</th>
<th>Compared Fund</th>
</tr>
</thead>
<tbody>
<tr>
<td>10th (pessimistic)</td>
<td id="sp500-p10">-</td>
<td id="compared-p10">-</td>
</tr>
<tr>
<td>25th</td>
<td id="sp500-p25">-</td>
<td id="compared-p25">-</td>
</tr>
<tr>
<td>50th (median)</td>
<td id="sp500-p50">-</td>
<td id="compared-p50">-</td>
</tr>
<tr>
<td>75th</td>
<td id="sp500-p75">-</td>
<td id="compared-p75">-</td>
</tr>
<tr>
<td>90th (optimistic)</td>
<td id="sp500-p90">-</td>
<td id="compared-p90">-</td>
</tr>
</tbody>
</table>
</details>
</div>
</div>
<script src="{{ get_url(path='js/fundComparison.js') | safe }}"></script>