It stands for **Equated Monthly Installment**. It's just a fancy word for 'How much I pay every month'.

The formula looks scary: P x R x (1+R)^N... but don't worry! We just copy-paste that part.

Can I use this for a car loan?

Yes! This works for Home Loans, Car Loans, and Personal Loans.

BeginnerFinance Tools

Build Your Own EMI Calculator (10 Easy Steps)

Learn to build a Loan EMI Calculator from scratch. We break down the scary math into simple code that anyone can understand.

26-12-20256 min readFastTools Team

Hi there! 👋

Buying a house or a car usually means borrowing money. But banks don't just give you money for free—they charge "Interest" (rent for money).

Today, we will build a tool that tells you exactly how much you need to pay back every month.

Think of a loan like a giant pizza calculation:

Principal: The size of the pizza (Total money borrowed).
Interest: The delivery fee (Extra money you pay).
Tenure: How many months you take to eat it.

Let's build a machine to slice this pizza!

🎯What You Will Learn

✓Create a clean financial input form
✓Convert yearly interest to monthly (Divide by 12)
✓Use the JavaScript Math.pow() power function
✓Format money validation (currency symbols)
✓Handle simplified user inputs

Step 1: The Bank Counter (HTML Container) 🏦

We start with a neat box to hold our calculator. We'll call it emi-card.

html

<div id="emi-card">
  <h2>🏠 EMI Calculator</h2>
  <!-- We will put inputs here -->
</div>

Step 2: Loan Amount (The "Principal") 💰

How much money do you want to borrow? In finance, this is called Principal (P).

html

<div class="input-group">
    <label>Loan Amount (P):</label>
    <input type="number" id="principal" placeholder="e.g. 500000">
</div>

Step 3: Interest Rate (The "Rent") 📈

How much is the bank charging you? This is the Rate (R). Usually, this is a yearly number like 8.5%.

html

<div class="input-group">
    <label>Interest Rate (% per year):</label>
    <input type="number" id="rate" placeholder="e.g. 8.5">
</div>

Step 4: Tenure (The "Time") ⏳

How long do you want to take to pay it back? We'll ask for Years, because saying "240 months" is hard math for humans.

html

<div class="input-group">
    <label>Time (Years):</label>
    <input type="number" id="years" placeholder="e.g. 20">
</div>

Step 5: The "Calculate" Button 🖩

The magic button. When clicked, it runs our calculateEMI function.

html

<button onclick="calculateEMI()">Calculate Monthly Payment</button>

Step 6: The Results Display 📊

We show three important numbers:

EMI: Monthly payment.
Total Interest: The extra money you paid.
Total Amount: Everything combined.

html

<div id="result">
    <div class="stat">EMI: <span id="emi-val">0</span></div>
    <div class="stat">Total Interest: <span id="interest-val">0</span></div>
    <div class="stat">Total Payment: <span id="total-val">0</span></div>
</div>

Step 7: The Formula (JavaScript) 🧠

Here is the secret recipe banks use. The formula is: EMI = [P x R x (1+R)^N] / [(1+R)^N-1]

Don't panic! We break it down:

P: Principal.
r: Monthly Interest (Yearly Rate / 12 / 100).
n: Total Months (Years * 12).

html

<script>
function calculateEMI() {
    // 1. Get values
    var P = parseFloat(document.getElementById('principal').value);
    var annualRate = parseFloat(document.getElementById('rate').value);
    var years = parseFloat(document.getElementById('years').value);

    // 2. Convert to monthly terms
    var r = annualRate / 12 / 100; // Monthly Interest
    var n = years * 12;            // Total Months

    // 3. The Math
    // Math.pow(a, b) means "a to the power of b"
    var top = Math.pow(1 + r, n);
    var bottom = top - 1;
    var ratio = top / bottom;
    
    var emi = P * r * ratio;
}
</script>

Step 8: Showing the Results 📝

Now we have the emi number (which might look like 1234.56789). We need to clean it up and show the totals.

javascript

    // ... continuing the function
    
    var totalPay = emi * n;
    var totalInt = totalPay - P;

    // .toFixed(2) rounds to 2 cents
    document.getElementById('emi-val').innerText = emi.toFixed(2);
    document.getElementById('interest-val').innerText = totalInt.toFixed(2);
    document.getElementById('total-val').innerText = totalPay.toFixed(2);

Step 9: Use Professional Styles (CSS) 👔

Let's make it look like a real banking app. We'll use a clean blue theme.

css

<style>
    body { font-family: sans-serif; background: #eef2ff; padding: 20px; }
    
    #emi-card {
        background: white;
        padding: 30px;
        max-width: 400px;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .input-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; color: #555; font-weight: bold; }
    input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
    
    button {
        width: 100%;
        background: #4f46e5;
        color: white;
        padding: 12px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
    }
    button:hover { background: #4338ca; }
    
    #result { margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; }
    .stat { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
    #emi-val { font-size: 20px; color: #4f46e5; font-weight: bold; }
</style>

Step 10: Complete Code to Copy 📋

Here is the whole thing. Save it as emi-calculator.html.

html

<!DOCTYPE html>
<html>
<head>
    <title>Easy EMI Calculator</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; background: #f8fafc; display: flex; justify-content: center; height: 100vh; align-items: center; margin: 0; }
        
        .card {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            width: 320px;
        }
        
        h2 { text-align: center; color: #1e293b; margin-top: 0; }
        
        label { display: block; font-size: 0.9rem; color: #64748b; margin-bottom: 0.5rem; margin-top: 1rem; }
        
        input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #cbd5e1;
            border-radius: 0.5rem;
            font-size: 1rem;
            box-sizing: border-box; /* Important for padding */
        }
        
        button {
            width: 100%;
            margin-top: 1.5rem;
            padding: 0.75rem;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 0.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
        }
        button:hover { background: #1d4ed8; }
        
        .result-box {
            background: #eff6ff;
            margin-top: 1.5rem;
            padding: 1rem;
            border-radius: 0.5rem;
        }
        
        .row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; color: #475569; }
        .big-row { font-size: 1.25rem; font-weight: bold; color: #2563eb; margin-bottom: 0px; }
    </style>
</head>
<body>

<div class="card">
    <h2>🏠 Loan Calculator</h2>
    
    <label>Loan Amount ($)</label>
    <input type="number" id="P" placeholder="500000">
    
    <label>Interest Rate (%)</label>
    <input type="number" id="R" placeholder="8.5">
    
    <label>Time (Years)</label>
    <input type="number" id="N" placeholder="20">
    
    <button onclick="calc()">Calculate EMI</button>
    
    <div class="result-box">
        <div class="row">
            <span>Monthly EMI:</span>
            <span class="big-row" id="emi">0</span>
        </div>
        <hr style="opacity: 0.1; margin: 10px 0;">
        <div class="row">
            <span>Total Interest:</span>
            <span id="totalInt">0</span>
        </div>
        <div class="row">
            <span>Total Payment:</span>
            <span id="totalPay">0</span>
        </div>
    </div>
</div>

<script>
    function calc() {
        // 1. Get Inputs
        let P = parseFloat(document.getElementById('P').value);
        let annualRate = parseFloat(document.getElementById('R').value);
        let years = parseFloat(document.getElementById('N').value);
        
        if(!P || !annualRate || !years) {
            alert("Please fill all fields!");
            return;
        }

        // 2. Convert to Monthly
        let r = annualRate / 12 / 100; // Monthly Rate
        let n = years * 12;            // Total Months

        // 3. EMI Formula
        // EMI = P * r * (1+r)^n / ((1+r)^n - 1)
        let top = Math.pow(1 + r, n);
        let bottom = top - 1;
        let emi = P * r * (top / bottom);
        
        // 4. Totals
        let totalPay = emi * n;
        let totalInt = totalPay - P;

        // 5. Display
        document.getElementById('emi').innerText = emi.toFixed(2);
        document.getElementById('totalInt').innerText = totalInt.toFixed(2);
        document.getElementById('totalPay').innerText = totalPay.toFixed(2);
    }
</script>

</body>
</html>

Conclusion

You are finance wizard! 🧙‍♂️

You just built a tool that millions of people use every day. You took a complex math formula and tamed it with a few lines of JavaScript.

Try changing the "Years" and see how dramatically the "Monthly EMI" changes. That's the power of compound interest!

Share this guide

More Guides

FastTools Team

Developer Tools & Resource Experts

FastTools is dedicated to curating high-quality content and resources that empower developers. With nearly 5 years of hands-on development experience, our team rigorously evaluates every tool and API we recommend, ensuring you get only the most reliable and effective solutions for your projects.

5 Years ExperienceQuality FocusedDeveloper First

Loading your tools...

Tools

Finance

AI

Media

Marketing

More

Step 1: The Bank Counter (HTML Container) 🏦

Step 2: Loan Amount (The "Principal") 💰

Step 3: Interest Rate (The "Rent") 📈

Step 4: Tenure (The "Time") ⏳

Step 5: The "Calculate" Button 🖩

Step 6: The Results Display 📊

Step 7: The Formula (JavaScript) 🧠

Step 8: Showing the Results 📝

Step 9: Use Professional Styles (CSS) 👔

Step 10: Complete Code to Copy 📋

Conclusion

FastTools Team

Step 1: The Bank Counter (HTML Container) 🏦

Step 2: Loan Amount (The "Principal") 💰

Step 3: Interest Rate (The "Rent") 📈

Step 4: Tenure (The "Time") ⏳

Step 5: The "Calculate" Button 🖩

Step 6: The Results Display 📊

Step 7: The Formula (JavaScript) 🧠

Step 8: Showing the Results 📝

Step 9: Use Professional Styles (CSS) 👔

Step 10: Complete Code to Copy 📋

Conclusion

FastTools Team