JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Paid</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
</table>

CSS

table {
  /* width: 100%; */
  margin: 0 auto;
  border: 1px solid #EEE;
  border-spacing: 0;
  border-collapse: collapse;
  font-family: monospace;
}
th, td {
  text-align: right;
  padding: 12px 24px;
  border-top: 1px solid #EEE;
}
tr:nth-child(odd) td {
  background-color: #F6F6F6;
}

JavaScript

const amount = 3_000_00;
const yearInt = 0.1;
const monthInt = yearInt / 12;
const numYears = 30;
const numMonths = numYears * 12;
let paid = amount;
let total = amount;
let m = 0;
let y = 0;
const rows = [];

const formatUsd = (cents) => {
  const dollars = Math.round(cents / 100);
  return `$${dollars.toLocaleString('en-US')}`;
};

const addRow = () => {
  const time = `${y}y ${m}m`;
  rows.push({time, paid: formatUsd(paid), total: formatUsd(total)});
};

addRow();

for (let i = 0; i < numMonths; i++) {
  paid += amount;
  const earned = total * monthInt;
  total += earned + amount;
  m += 1;
  if (m >= 12) {
    m = 0;
    y += 1;
  }
  addRow();
}

console.table(rows);


let html = '';
rows.forEach((row) => {
  html +=  `
    <tr>
      <td>${row.time}</td>
      <td>${row.paid}</td>
      <td>${row.total}</td>
    </tr>
  `;
});
const el = document.getElementById('tbody');
el.innerHTML = html;