diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..d08863f --- /dev/null +++ b/index.html @@ -0,0 +1,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> |