Retirement Calculator

by wio_dude

HTML

<table>
  <tr>
    <th><label for="inflation">Inflation (%)</label></th>
    <th><label for="ar">Annualized Return (%)</label></th>
    <th><label for="retire">Retire Return (%)</label></th>
  </tr>
  <tr>
    <td><input id="inflation" type=text value="2" /></td>
    <td><input id="ar" type=text value="6" /></td>
    <td><input id="retire" type=text value="4" /></td>
  </tr>
</table>
<br />

<table>
  <tr>
    <th><label for="inital">Initial Capital</label></th>
    <td><input id="initial" type=text value="200000" /></td>
  </tr>
  <tr>
    <th><label for="years">Years</label></th>
    <td><input id="years" type=text value="25" /></td>
  </tr>
  <tr>
    <th><label for="budget">Monthly Budget</label></th>
    <td><input id="budget" type=text value="3000" /></td>
  </tr>
</table>
<br />
<div id="output"></div>

CSS

table {
  border-collapse: collapse;
}


th, td {
  border: 1px solid black;
  padding: 0px 10px;
}

td {
  text-align: right;
}

.horizontal {
  display: inline-block;
  margin-right: 10px;
}

JavaScript

const el = {
  inflation: document.getElementById('inflation'),
  retire: document.getElementById('retire'),
  ar: document.getElementById('ar'),
  initial: document.getElementById('initial'),
  years: document.getElementById('years'),
  budget: document.getElementById('budget'),
  output: document.getElementById('output'),
};

el.inflation.addEventListener('input', calc);
el.retire.addEventListener('input', calc);
el.ar.addEventListener('input', calc);
el.initial.addEventListener('input', calc);
el.years.addEventListener('input', calc);
el.budget.addEventListener('input', calc);

const usdfmt = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

const pfmt = new Intl.NumberFormat('en-US', {
	minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

function calc() {
  const inflation = parseFloat(el.inflation.value) / 100;
  const retire = parseFloat(el.retire.value) / 100;
  const ar = parseFloat(el.ar.value) / 100;
  const initial = parseFloat(el.initial.value);
  const years = parseFloat(el.years.value);
  const budget = parseFloat(el.budget.value);


  const futureCapital = initial * Math.pow(1 + ar, years);
  const futureBudget = budget * Math.pow(1 + inflation, years);
  const targetCapital = futureBudget * 12 / retire;
  const gap = Math.max(targetCapital - futureCapital, 0);
  const yearlyGap = gap * (1 - (1 + ar)) / (1 - Math.pow(1 + ar, years));


  el.output.innerHTML = '';

  const mainHead = [
  	'Montly Investment',
    'Retirement Budget',
    'Retirement Capital',
  ];
  const mainRows = [
    usdfmt.format(yearlyGap / 12),
    usdfmt.format(futureBudget),
    usdfmt.format(targetCapital),
  ];
  let tbMain = '<table>';
  tbMain += `<tr>${mainHead.map(x => `<th>${x}</th>`).join('')}</tr>`;
  tbMain += `<tr>${mainRows.map(x => `<td>${x}</td>`).join('')}</tr>`;
  tbMain += '</table>';
  
  el.output.innerHTML += tbMain;
  el.output.innerHTML += '<br />';

  const date = new Date();
  const currentYear =...