webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
34–39 of 60

Loan EMI Calculator

JSON Diff Viewer

Expense Split Calculator

Barcode Detector API Demo

Web Crypto Hash Demo

Citation Style Formatter

Loan EMI Calculator — Free HTML CSS JS EMI Formula Snippet

Loan EMI Calculator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsDeveloper Tools

Copy & paste

Source Code

<div class="emi-card">
  <h2>Loan EMI Calculator</h2>
  <p class="sub">Estimate your monthly installment, total interest, and total payment.</p>

  <div class="field">
    <label for="principal">Loan amount</label>
    <div class="input-wrap">
      <span class="prefix">$</span>
      <input type="number" id="principal" value="250000" min="0" step="1000" oninput="calculateEmi()">
    </div>
  </div>

  <div class="field">
    <label for="rate">Annual interest rate</label>
    <div class="input-wrap">
      <input type="number" id="rate" value="7.5" min="0" step="0.1" oninput="calculateEmi()">
      <span class="suffix">%</span>
    </div>
  </div>

  <div class="field">
    <label for="tenure">Loan tenure</label>
    <div class="input-wrap">
      <input type="number" id="tenure" value="20" min="0" step="1" oninput="calculateEmi()">
      <span class="suffix">years</span>
    </div>
  </div>

  <div class="results">
    <div class="result-row emi">
      <span class="result-label">Monthly EMI</span>
      <span class="result-value" id="emiValue">$0</span>
    </div>
    <div class="result-row">
      <span class="result-label">Total interest</span>
      <span class="result-value" id="interestValue">$0</span>
    </div>
    <div class="result-row">
      <span class="result-label">Total payment</span>
      <span class="result-value" id="totalValue">$0</span>
    </div>
  </div>

  <div class="bar" aria-hidden="true">
    <div class="bar-principal" id="barPrincipal"></div>
    <div class="bar-interest" id="barInterest"></div>
  </div>
  <div class="legend">
    <span><i class="dot principal"></i> Principal</span>
    <span><i class="dot interest"></i> Interest</span>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Implements the exact standard EMI amortization formula, not an approximation
Handles the zero-interest edge case separately to avoid a division-by-zero error
Live recalculation on every keystroke via oninput — no submit button needed
Derives total interest and total payment directly from the computed EMI
Two-color bar visualizes the principal-versus-interest split, always summing to 100%
Currency formatting via toLocaleString for readable thousands separators
Prefix/suffix input styling ($ and % / years) makes each field's unit unambiguous
Focus-within ring on each input group for clear keyboard and mouse focus feedback
All calculation logic isolated in one calculateEmi function, easy to unit test or extend
No framework, no finance library, no build step required

About this UI Snippet

Loan EMI Calculator — HTML, CSS & JavaScript Amortization Snippet

Screenshot of the Loan EMI Calculator snippet rendered live

An EMI (Equated Monthly Installment) is the fixed amount a borrower pays every month toward a loan until it's fully repaid — the standard structure for mortgages, auto loans, and personal loans. Every EMI calculator on the web, no matter how polished, comes down to the same amortization formula applied to three inputs: principal, interest rate, and tenure.

This snippet implements that formula in plain HTML, CSS, and vanilla JavaScript, with live recalculation on every keystroke and a two-color bar visualizing the principal-versus-interest split.

The EMI formula

The standard formula is:

EMI = [P × r × (1 + r)^n] / [(1 + r)^n − 1]

where P is the principal, r is the *monthly* interest rate (the annual rate divided by 12 and by 100 to convert from a percentage), and n is the total number of monthly installments (years × 12). The JavaScript computes factor = Math.pow(1 + monthlyRate, months) once and reuses it in both the numerator and denominator, which is exactly the (1 + r)^n term in the formula above.

Handling the zero-interest edge case

If the interest rate is 0, the formula's denominator (1 + r)^n − 1 becomes 0, which would throw a division-by-zero error. The code checks for monthlyRate === 0 first and falls back to simple division — principal / months — since a zero-interest loan is just the principal spread evenly across the term with no formula needed.

Deriving total interest and total payment

Once EMI is known, totalPayment = emi × months gives the sum of every installment, and totalInterest = totalPayment − principal gives the portion of that total which is pure interest rather than principal repayment. These two numbers are what most borrowers actually care about — the EMI tells you the monthly burden, but total interest tells you the true cost of borrowing.

The principal/interest bar

The visual bar underneath the results is two flex children whose widths are set from principal / totalPayment and its complement, so the bar always sums to 100% regardless of the numbers involved — a longer tenure or higher rate visibly shifts more of the bar toward the orange interest segment.

Live recalculation

Every input has oninput="calculateEmi()", so the results and bar update on every keystroke rather than requiring a submit button — appropriate for a calculator where users expect to see the impact of adjusting a number immediately.

Step by step

How to Use

  1. 1
    Load the snippetClick "Loan EMI Calculator" in the sidebar Library tab. The preview loads with example values already calculated.
  2. 2
    Change the inputsAdjust the loan amount, interest rate, or tenure in the preview and watch the EMI, total interest, and total payment update instantly.
  3. 3
    Check the principal/interest splitWatch the two-color bar shift as you increase the tenure or rate — a longer loan pushes more of the total toward interest.
  4. 4
    Adjust the currency formatIn the JS panel, edit the formatCurrency function to use a different locale or currency symbol via toLocaleString options.
  5. 5
    Add monthly tenure inputIn the HTML panel, add a months field alongside years and update the months calculation in calculateEmi() to sum years × 12 plus the extra months.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for React, or "Tailwind" for React + Tailwind CSS.

Real-world uses

Common Use Cases

FINANCE
Mortgage and auto loan estimators
Give visitors an instant, no-signup estimate of their monthly payment before they start a formal loan application.
Learn the amortization formula
Study how principal, monthly rate, and number of payments combine algebraically to produce a fixed monthly installment.
Prototype a fintech onboarding flow
Drop this into an early product prototype where users need to see loan affordability before connecting a real underwriting API.
Match your financial product branding
Recolor the bar and result highlight to fit your brand, and adjust the currency symbol for your target market.
Add ARIA live regions for the results
Wrap the result values in an aria-live="polite" region so screen reader users hear the updated EMI as they adjust the inputs.
Extract the formula into a reusable function
Pull calculateEmi's math into a standalone pure function you can unit test and reuse across a full loan-comparison feature.
Related: Return Label Generator
See the Return Label Generator for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The standard EMI amortization formula: EMI = [P × r × (1 + r)^n] / [(1 + r)^n − 1], where P is the principal, r is the monthly interest rate (annual rate ÷ 12 ÷ 100), and n is the total number of monthly payments (years × 12).

When the interest rate is 0, the formula's denominator (1 + r)^n − 1 evaluates to 0, which would cause a division-by-zero error. The code detects this case and falls back to simple division: principal divided evenly across the number of months.

Total interest equals total payment minus the original principal. Total payment is the EMI multiplied by the total number of months, so total interest represents everything paid beyond the amount originally borrowed.

Yes. Add a second number input for extra months, and change the months calculation to years * 12 + extraMonths before it feeds into the EMI formula — no other logic needs to change.

Edit the formatCurrency function's toLocaleString call — pass a different locale string (like "en-IN" or "de-DE") and/or wrap the number with Intl.NumberFormat and a currency style option for full localized currency formatting.

No — this calculates the pure amortization EMI based on principal, rate, and tenure only. Real-world monthly payments may include property tax escrow, insurance, or origination fees that this snippet does not model.

Each input uses the oninput event, which fires on every keystroke, so calculateEmi() reruns and updates the results immediately. This matches user expectations for a lightweight calculator tool.

Yes. Loop from month 1 to n, and on each iteration compute that month's interest portion as the remaining balance times the monthly rate, subtract the rest of the EMI from the balance as principal repaid, and store each row — this snippet only shows the totals, not the full schedule.