How to Build a Loan EMI Calculator in JavaScript (With Amortization Schedule)

Every Indian who has ever applied for a home, car, or personal loan has asked the same question: "meri EMI kitni banegi?" Banks give you the number, but most of us have no idea how it is calculated — which is exactly why longer tenures and "low EMI" offers quietly cost us lakhs in extra interest.

An EMI calculator is one of the most useful beginner JavaScript projects you can build. It teaches you the two skills every real-world web app needs: doing math correctly in code and turning that math into a schedule the user can actually read. In this tutorial, you will build a complete loan EMI calculator with a full month-by-month amortization schedule, using only plain HTML, CSS, and JavaScript — no frameworks, no libraries.

And because this site is about shipping real code, the complete project is available as a free EMI Calculator download — you can compare your version with the working one at every step. If you want to understand the loan concepts first, start with our 2026 EMI guide for Indian borrowers.

1. What an EMI Calculator Actually Computes

EMI stands for Equated Monthly Instalment — a fixed amount you pay the lender every month. It is fixed, but its composition is not: in the early months, most of your EMI is interest; only a small part reduces the loan principal. Towards the end, the ratio flips.

Take a real example: a ₹25 lakh home loan at 8.5% per year for 20 years. Your EMI comes out to about ₹21,696 per month. Over 240 months you pay roughly ₹52.07 lakh — which means you pay around ₹27.07 lakh in interest alone. That is why understanding the amortization schedule matters: it shows you exactly where your money goes every single month.

The math behind it is one formula. You need three inputs:

• P — the principal (loan amount)
• R — the monthly interest rate (annual rate ÷ 12 ÷ 100)
• N — the total number of monthly payments (years × 12)

Everything your calculator does flows from that one formula. Let us break it open.

2. The EMI Formula, Explained Simply

The standard formula used by every Indian bank is:

EMI = P × R × (1 + R)^N ÷ ((1 + R)^N − 1)

Plugging in the home loan example: P = 25,00,000, R = 0.085 ÷ 12 = 0.007083, N = 240. Compute (1.007083)²⁴⁰ ≈ 5.442, and the formula gives EMI ≈ ₹21,696.

One edge case beginners always miss: a zero interest rate. When R = 0, the formula divides by zero. Handle it explicitly — with zero interest, the EMI is simply P ÷ N. Real apps also need input validation: loan amount must be positive, the rate must be between 0 and a sane ceiling, and the tenure must be a positive whole number of months. Your JavaScript will do all of this before any calculation runs.

Now the more interesting part: the amortization schedule. For each month, the interest portion is remaining balance × R, and the principal portion is EMI − interest. Subtract the principal from the balance, repeat for N months. Month by month, the interest shrinks and the principal repayment grows — that is the classic amortization curve.

3. Project Setup: Files and Folder Structure

Keep this project deliberately simple — four files in one folder, no build tools:

emi-calculator/
├── index.html      – loan form + results layout
├── style.css       – dark-friendly, mobile-first styling
├── app.js          – EMI math + schedule + rendering
└── README.txt      – how to run it

Open index.html directly in a browser and it works — no server needed. This is the same structure used by the free EMI Calculator on CodeFree, which adds loan presets (home, car, personal) and an interactive chart on top of this base.

Your page needs three input fields (loan amount, annual interest rate, tenure), a results panel for the headline numbers (EMI, total interest, total payable), and a container for the schedule table. Add a preset dropdown with realistic Indian values — home loan 8.5% / 20 years, car loan 9.5% / 5 years, personal loan 12% / 3 years — because real users think in "car loan", not in abstract numbers.

4. Building the Input Form (With Real Validation)

A calculator that accepts "−50000" as a loan amount is a calculator nobody trusts. Validate before you calculate:

function validateInputs(principal, rate, years) {
  if (!isFinite(principal) || principal <= 0) return "Loan amount must be a positive number.";
  if (!isFinite(rate) || rate < 0 || rate > 36) return "Interest rate must be between 0 and 36%.";
  if (!isFinite(years) || years <= 0 || years > 30) return "Tenure must be between 1 month and 30 years.";
  return null; // all good
}

Display the error inline next to the form — never in an alert() box. Also handle the classic UX annoyance: users paste commas ("25,00,000"). Strip every non-digit except the decimal point before parsing: value.replace(/[^\d.]/g, ""). This one line prevents half of all user bug reports.

Round money to whole rupees for display. Nobody pays ₹21,696.43 — the EMI is ₹21,696, and the tiny remainder is adjusted in the final month's schedule entry.

5. Writing the Calculation Engine in JavaScript

This is the heart of the project. The function takes the three inputs and returns everything the UI needs:

function calculateEMI(principal, annualRate, years) {
  const R = annualRate / 12 / 100;   // monthly rate
  const N = Math.round(years * 12);  // total months
  let emi;

  if (R === 0) {
    emi = principal / N;             // zero-interest edge case
  } else {
    const factor = Math.pow(1 + R, N);
    emi = principal * R * factor / (factor - 1);
  }

  // Build the month-by-month amortization schedule
  let balance = principal;
  const schedule = [];
  let totalInterest = 0;

  for (let month = 1; month <= N; month++) {
    const interest = balance * R;
    let principalPaid = emi - interest;
    let payment = emi;

    if (month === N) {               // final month: clear the exact balance
      principalPaid = balance;
      payment = balance + interest;
    }

    balance -= principalPaid;
    totalInterest += interest;
    schedule.push({ month, payment, interest, principalPaid, balance: Math.max(balance, 0) });
  }

  return { emi, schedule, totalInterest, totalPayable: principal + totalInterest };
}

Notice two deliberate choices. First, the final-month adjustment: floating-point rounding means the balance will not land exactly on zero after N iterations, so the last payment is set to clear whatever remains. Second, everything is pure JavaScript — no state, no DOM inside the math. That separation is what makes the function easy to test. In fact, you can verify the ₹25L example in a single line in the browser console and check it against the known answer: ₹21,696 EMI, final balance 0.

For a 20-year loan the schedule has 240 rows. Keep each row a small object; rendering is a separate function's job. If you are worried about performance, don't be — 240 rows is nothing for the browser.

6. Rendering the Results: Headline Numbers + Schedule Table

Users decide in the first three seconds whether your calculator is useful. Lead with three big numbers: Monthly EMI, Total Interest, Total Payable. Below that, show a year-by-year collapsible view instead of dumping all 240 rows — the monthly detail stays available per year for the curious.

Two display details matter a lot for Indian users:

• Indian number formatting: use ₹52,07,040, not ₹5,207,040. JavaScript gives this for free with new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 }).
• Principal vs interest visualization: a simple donut or bar chart showing the split (₹25L principal vs ₹27.07L interest) is the single most persuasive element on the page — it is the moment a user realises why a shorter tenure matters.

Re-render on every input change rather than on a "Calculate" click. Live feedback feels like a modern fintech app; a button feels like a 2010 tax form. Debounce is unnecessary at this scale — just recalculate on input events.

7. Making It India-Ready: Presets, Loan Types, and Prepayment Thinking

The difference between a tutorial project and a product people bookmark is the last 10% of context. Indian borrowers deal with three loan realities your calculator can acknowledge:

• Loan presets: home (₹25L+, 8.5%, 20 yrs), car (₹8L, 9.5%, 5 yrs), personal (₹3L, 12%, 3 yrs), education (₹10L, 10%, 7 yrs). One-click presets turn a generic math tool into a personal finance helper.
• Floating vs fixed rate honesty: add a small note that banks quote floating rates — your calculated EMI assumes the rate never changes. Real EMIs get revised; the calculator is a planning tool, not a contract.
• Prepayment awareness: mention that extra payments hit the principal directly. A future upgrade — a prepayment input that re-computes the schedule — is an excellent version-2 feature and a great interview talking point.

Test your finished calculator against three checks: the ₹25L / 8.5% / 20-year case gives ₹21,696 EMI; the final schedule balance is exactly 0; and a 0% rate returns principal ÷ months. If all three pass, your math engine is solid.

Download the Complete Source Code

Reading the snippets above gives you the logic, but real learning happens when you run the whole thing. Download the free EMI Calculator source code — pure HTML, CSS, and vanilla JavaScript with loan presets, a principal-vs-interest chart, and a full year-by-year amortization schedule — and use it as a reference while you build your own version. Modify it, break it, add the prepayment feature. That is how a tutorial project becomes a portfolio project.

Frequently Asked Questions

How is EMI calculated in India?

Indian banks use the reducing-balance formula: EMI = P × R × (1+R)^N ÷ ((1+R)^N − 1), where P is the loan amount, R is the monthly interest rate, and N is the number of months. Interest is charged only on the outstanding balance each month.

Why is the total interest so high on long-tenure loans?

Because interest is charged on the remaining balance every month, and a long tenure keeps the balance high for longer. On the ₹25L / 8.5% / 20-year example above, interest (₹27.07L) exceeds the principal — shortening the tenure to 15 years cuts total interest dramatically at the cost of a higher EMI.

Can I download the full source code for free?

Yes. The complete project — HTML form, CSS, the calculation engine, the schedule renderer, loan presets, and the chart — is available as a free download on CodeFree. Pure HTML/CSS/JS, no dependencies, no signup.

Does this calculator include loan prepayment?

The base tutorial project does not — prepayment is a version-2 feature. Conceptually it is straightforward: subtract the extra payment from the outstanding balance in the relevant month, then rebuild the remaining schedule. Try adding it yourself; it is a great exercise in working with the amortization loop.