Interest Calculator

When it comes to managing finances, understanding how your savings and investments grow over time is essential. I often found myself needing a quick and simple way to calculate potential interest earnings, whether for savings accounts, banks, or investments. Comparing options or planning for the future shouldn’t be overly complicated.

That’s why I built this interest calculator! It’s designed to give a complete picture of how your savings could grow over time. You can enter details like an initial deposit, monthly contributions, and the annual interest rate, along with optional fields for fees and inflation.

What’s more, the calculator now provides a detailed month-by-month breakdown. This way, you can see how your balance changes over time, including how much interest is added each month. Whether you’re saving consistently or making a one-time deposit, this tool adapts to your needs.

Try it out below, and see how easy it is to plan your financial future!

Interest Calculator

Calculate how much interest you'll earn, including optional initial deposits, monthly savings, fees, and inflation.

Initial Amount (£):

Monthly Contribution (£):

Annual Interest Rate (%):

Time (years):

Annual Fees (%):

Inflation Rate (%):

Result

Your interest earned will appear here.

Monthly Breakdown

Month	Starting Balance (£)	Interest (£)	Ending Balance (£)

---

Add This Interest Calculator to Your Website

If you would like to add this Interest Calculator to your website, you can use the following code.

Interest Calculator Code:

<h1>Interest Calculator</h1>
<p>Calculate how much interest you'll earn, including optional initial deposits, monthly savings, fees, and inflation.</p>

<form id="interest-form">
  <div class="form-row">
    <label for="principal">Initial Amount (£):</label>
    <input type="number" id="principal" name="principal" placeholder="Optional">
  </div>
  <div class="form-row">
    <label for="monthly">Monthly Contribution (£):</label>
    <input type="number" id="monthly" name="monthly" placeholder="Optional">
  </div>
  <div class="form-row">
    <label for="rate">Annual Interest Rate (%):</label>
    <input type="number" id="rate" name="rate" step="0.01" required>
  </div>
  <div class="form-row">
    <label for="time">Time (years):</label>
    <input type="number" id="time" name="time" required>
  </div>
  <div class="form-row">
    <label for="fees">Annual Fees (%):</label>
    <input type="number" id="fees" name="fees" step="0.01" placeholder="Optional">
  </div>
  <div class="form-row">
    <label for="inflation">Inflation Rate (%):</label>
    <input type="number" id="inflation" name="inflation" step="0.01" placeholder="Optional">
  </div>
  <div class="form-row">
    <button type="button" onclick="calculateInterest()">Calculate</button>
  </div>
</form>

<h2>Result</h2>
<p id="result">Your interest earned will appear here.</p>

<h3>Monthly Breakdown</h3>
<table id="breakdown-table" style="display:none; width:100%; border-collapse: collapse; margin-top:20px;">
  <thead>
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px;">Month</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Starting Balance (£)</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Interest (£)</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Ending Balance (£)</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<style>
  /* Styling for the form */
  #interest-form {
    max-width: 400px;
    margin: 0 auto;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  label {
    margin-bottom: 5px;
    font-weight: bold;
  }

  input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  button {
    padding: 10px 15px;
    font-size: 16px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

  #result {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
  }
</style>

<script>
function calculateInterest() {
  const principal = parseFloat(document.getElementById('principal').value) || 0; // Default to 0 if empty
  const monthly = parseFloat(document.getElementById('monthly').value) || 0;     // Default to 0 if empty
  const rate = parseFloat(document.getElementById('rate').value) / 100;
  const time = parseFloat(document.getElementById('time').value);
  const fees = parseFloat(document.getElementById('fees').value) || 0;          // Default to 0 if empty
  const inflation = parseFloat(document.getElementById('inflation').value) || 0; // Default to 0 if empty

  if (isNaN(rate) || isNaN(time)) {
    document.getElementById('result').textContent = "Please fill out the required fields (Rate and Time) with valid numbers.";
    return;
  }

  const months = time * 12;
  const monthlyRate = rate / 12;

  let balance = principal;
  let totalInterest = 0;

  const tbody = document.querySelector('#breakdown-table tbody');
  tbody.innerHTML = ''; // Clear previous results

  for (let i = 1; i <= months; i++) {
    const startingBalance = balance;
    const monthlyInterest = startingBalance * monthlyRate;
    balance += monthlyInterest + monthly;
    totalInterest += monthlyInterest;

    // Add a row to the table for this month
    const row = document.createElement('tr');
    row.innerHTML = `
      <td style="border: 1px solid #ddd; padding: 8px;">${i}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">£${startingBalance.toFixed(2)}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">£${monthlyInterest.toFixed(2)}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">£${balance.toFixed(2)}</td>
    `;
    tbody.appendChild(row);
  }

  // Adjust for Fees and Inflation
  const totalFees = (fees / 100) * time * balance;
  const inflationAdjustment = (inflation / 100) * time * balance;
  const adjustedBalance = balance - totalFees - inflationAdjustment;

  document.getElementById('result').textContent = 
    `Interest Earned: £${totalInterest.toFixed(2)} | Total Amount After Adjustments: £${adjustedBalance.toFixed(2)}`;

  // Show the table
  document.getElementById('breakdown-table').style.display = 'table';
}
</script>