DEV Community

freelancing
freelancing

Posted on

Build a Monthly Loan Repayment Calculator with JavaScript

A loan repayment calculator is a practical beginner project for learning JavaScript functions, mathematical formulas, input validation and DOM manipulation.

In this tutorial, we will create a calculator that estimates the monthly repayment for a standard fixed-rate amortising loan.

Understanding the formula

The monthly repayment is calculated using:

[
M=P\frac{r(1+r)^n}{(1+r)^n-1}
]

Where:

  • P is the principal.
  • r is the monthly interest rate expressed as a decimal.
  • n is the total number of monthly payments.
  • M is the estimated monthly repayment.

The annual percentage rate is divided by 100 and then by 12 to obtain the monthly rate.

When the interest rate is zero, the formula needs a separate case: divide the principal by the number of payments.

Step 1: Create the HTML

Save this as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Loan Calculator</title>
</head>
<body>
  <h1>Loan Repayment Calculator</h1>

  <form id="loan-form">
    <label for="principal">Loan amount</label>
    <input id="principal" type="number" min="0.01"
           step="0.01" required>

    <label for="rate">Annual interest rate (%)</label>
    <input id="rate" type="number" min="0"
           step="0.01" required>

    <label for="years">Loan term (years)</label>
    <input id="years" type="number" min="1"
           max="50" step="1" required>

    <button type="submit">Calculate</button>
  </form>

  <p id="result" aria-live="polite"></p>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Implement the calculation

Save this as script.js:

const form = document.querySelector("#loan-form");
const result = document.querySelector("#result");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const principal = Number(
    document.querySelector("#principal").value
  );

  const annualRate = Number(
    document.querySelector("#rate").value
  );

  const years = Number(
    document.querySelector("#years").value
  );

  if (
    !Number.isFinite(principal) ||
    !Number.isFinite(annualRate) ||
    !Number.isFinite(years) ||
    principal <= 0 ||
    annualRate < 0 ||
    years < 1 ||
    years > 50 ||
    !Number.isInteger(years)
  ) {
    result.textContent = "Enter valid loan details.";
    return;
  }

  const monthlyRate = annualRate / 100 / 12;
  const payments = years * 12;

  let monthlyPayment;

  if (monthlyRate === 0) {
    monthlyPayment = principal / payments;
  } else {
    const factor = Math.pow(
      1 + monthlyRate,
      payments
    );

    monthlyPayment =
      principal * monthlyRate * factor / (factor - 1);
  }

  result.textContent =
    `Estimated monthly repayment: ${monthlyPayment.toFixed(2)}`;
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Test the calculator

Try different loan amounts, interest rates and repayment periods.

Useful test cases include:

  • A positive interest rate.
  • A zero interest rate.
  • A very small principal.
  • Invalid or missing inputs.
  • The maximum supported loan term.

For example, with a principal of 100,000, an annual rate of 6% and a term of 20 years, the estimated monthly repayment is approximately 716.43 in the same currency units as the principal.

The result is an estimate, not a quote from a lender.

Possible improvements

You could extend the project by adding:

  • Currency formatting.
  • Total repayment and total interest.
  • An amortisation table.
  • Input fields for additional fees.
  • Automated tests for the calculation function.
  • A responsive CSS layout.

Separating the mathematical calculation from the user interface would also make the code easier to test and maintain.

Conclusion

This project demonstrates how a mathematical formula can become an interactive web application. It is also a useful reminder that software outputs depend on assumptions.

The example assumes regular monthly payments and a fixed interest rate. Real loan products may include fees, variable rates and other conditions that are not represented by this calculator.

Use it as a programming exercise rather than as personalised financial guidance.

Top comments (0)