Compound Interest Calculator — Free HTML CSS JS Snippet

<div class="wrap">
  <h2>Compound Interest Calculator</h2>

  <div class="form-grid">
    <div class="field">
      <label>Principal ($)</label>
      <input type="number" id="principal" value="10000" min="0" />
    </div>
    <div class="field">
      <label>Annual rate (%)</label>
      <input type="number" id="rate" value="7" step="0.1" min="0" />
    </div>
    <div class="field">
      <label>Years</label>
      <input type="number" id="years" value="15" min="1" max="60" />
    </div>
    <div class="field">
      <label>Compounding</label>
      <select id="frequency">
        <option value="1">Annually</option>
        <option value="4">Quarterly</option>
        <option value="12" selected>Monthly</option>
        <option value="365">Daily</option>
      </select>
    </div>
    <div class="field span-2">
      <label>Monthly contribution ($)</label>
      <input type="number" id="contribution" value="200" min="0" />
    </div>
  </div>

  <div class="summary" id="summary"></div>

  <div class="table-wrap">
    <table id="breakdown-table">
      <thead><tr><th>Year</th><th>Contributions</th><th>Interest earned</th><th>Balance</th></tr></thead>
      <tbody id="breakdown-body"></tbody>
    </table>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 720px; margin: 0 auto; }
h2 { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 18px; }
.field.span-2 { grid-column: span 2; }
.field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 9px 11px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; color: #1e293b;
}
.field input:focus, .field select:focus { outline: none; border-color: #6366f1; }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.summary .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.summary .card .val { font-size: 20px; font-weight: 800; color: #1e293b; }
.summary .card.highlight .val { color: #16a34a; }
.summary .card .lbl { font-size: 11px; font-weight: 700; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

.table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: right; padding: 9px 12px; background: #f8fafc; color: #64748b; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e2e8f0; }
th:first-child, td:first-child { text-align: left; }
td { text-align: right; padding: 7px 12px; border-bottom: 1px solid #f1f5f9; color: #334155; }
tr:last-child td { border-bottom: none; }
tbody { display: block; max-height: 320px; overflow-y: auto; }
thead, tbody tr { display: table; width: 100%; table-layout: fixed; }

function currency(n) {
  return '$' + n.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}

const principalInput = document.getElementById('principal');
const rateInput = document.getElementById('rate');
const yearsInput = document.getElementById('years');
const frequencyInput = document.getElementById('frequency');
const contributionInput = document.getElementById('contribution');
const summary = document.getElementById('summary');
const breakdownBody = document.getElementById('breakdown-body');

function computeSchedule(principal, annualRatePct, years, compoundsPerYear, monthlyContribution) {
  const r = annualRatePct / 100;
  const periodicRate = r / compoundsPerYear;
  const monthlyRate = r / 12;
  let balance = principal;
  let totalContributions = principal;
  const rows = [];

  // Simulate month by month for accuracy with monthly contributions, but only
  // apply compounding growth at the configured compounding frequency.
  const totalMonths = years * 12;
  const monthsPerCompound = 12 / compoundsPerYear;
  let monthsSinceCompound = 0;
  let yearStartBalance = principal;
  let yearContributions = 0;
  let yearInterest = 0;

  for (let month = 1; month <= totalMonths; month++) {
    balance += monthlyContribution;
    totalContributions += monthlyContribution;
    yearContributions += monthlyContribution;
    monthsSinceCompound += 1;

    if (monthsSinceCompound >= monthsPerCompound) {
      const interest = balance * periodicRate;
      balance += interest;
      yearInterest += interest;
      monthsSinceCompound = 0;
    }

    if (month % 12 === 0) {
      rows.push({
        year: month / 12,
        contributions: yearContributions,
        interest: yearInterest,
        balance: balance,
      });
      yearContributions = 0;
      yearInterest = 0;
    }
  }

  return { rows, finalBalance: balance, totalContributions };
}

function render() {
  const principal = Math.max(0, parseFloat(principalInput.value) || 0);
  const rate = Math.max(0, parseFloat(rateInput.value) || 0);
  const years = Math.max(1, Math.min(60, parseInt(yearsInput.value, 10) || 1));
  const frequency = parseInt(frequencyInput.value, 10);
  const contribution = Math.max(0, parseFloat(contributionInput.value) || 0);

  const { rows, finalBalance, totalContributions } = computeSchedule(principal, rate, years, frequency, contribution);
  const totalInterest = finalBalance - totalContributions;

  summary.innerHTML =
    '<div class="card highlight"><div class="val">' + currency(finalBalance) + '</div><div class="lbl">Final balance</div></div>' +
    '<div class="card"><div class="val">' + currency(totalContributions) + '</div><div class="lbl">Total contributed</div></div>' +
    '<div class="card"><div class="val">' + currency(totalInterest) + '</div><div class="lbl">Interest earned</div></div>';

  breakdownBody.innerHTML = rows.map((row) =>
    '<tr><td>' + row.year + '</td>' +
    '<td>' + currency(row.contributions) + '</td>' +
    '<td>' + currency(row.interest) + '</td>' +
    '<td>' + currency(row.balance) + '</td></tr>'
  ).join('');
}

[principalInput, rateInput, yearsInput, frequencyInput, contributionInput].forEach((el) => {
  el.addEventListener('input', render);
  el.addEventListener('change', render);
});

render();