Loan EMI Calculator Calculate EMI on Home, Car and Personal Loans

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP Loan Calculator</title>
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #28a745;
            --background-color: #f8f9fa;
            --text-color: #343a40;
            --container-bg: #ffffff;
            --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
            --shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.12);
            --gradient-start: #e0eafc;
            --gradient-end: #cfdef3;
        }

body {
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
        }

body.dark-mode {
            --primary-color: #4dabf7;
            --secondary-color: #40c057;
            --background-color: #121212;
            --text-color: #e0e0e0;
            --container-bg: #1e1e1e;
            --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.2);
            --shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.3);
            --gradient-start: #232526;
            --gradient-end: #414345;
        }

. {
            max-width: 100%; /* Blogger ke liye width badha di gayi hai. Full-width ke liye isse hata dein. */
            margin: auto;
            background-color: var(--container-bg);
            padding: 30px;
            border-radius: 20px;
            box-shadow: var(--shadow-dark);
        }

.header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #dee2e6;
        }
        body.dark-mode .header { 
          
          border-bottom-color: #343a40; }

.header h1 { color: var(--primary-color); font-weight: 600; }
        .theme-buttons { display: flex; gap: 15px; 
      
      
      }

.icon-button {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow-light);
            transition: all 0.2s ease-in-out;
            font-size: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.icon-button:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-dark);
        }

#dark-mode-toggle { background-color: #343a40; color: #fff; }
        body.dark-mode #dark-mode-toggle { background-color: #f8f9fa; color: #343a40; }
        #gradient-changer { background-color: #fff; color: var(--primary-color); }

.input-group { margin-bottom: 25px; }
        .input-group label { display: block; margin-bottom: 10px; font-weight: 500; }

input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            outline: none;
            opacity: 0.9;
            transition: opacity .2s;
        }
        body.dark-mode input[type="range"] { background: #343a40; }

input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 24px; height: 24px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            border: 4px solid var(--container-bg);
            box-shadow: var(--shadow-light);
        }

/* VIP SUMMARY SECTION */
        .loan-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

.summary-card {
            background-color: var(--background-color);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: var(--shadow-light);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

.summary-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-dark);
        }

.summary-card span {
            display: block;
            font-size: 1rem;
            color: #6c757d;
            margin-bottom: 10px;
        }
        body.dark-mode .summary-card span { color: #adb5bd; }

.summary-card strong {
            display: block;
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--text-color);
        }
        
        /* Highlight EMI and Total Payment cards */
        .summary-card.highlight strong {
            color: var(--primary-color);
        }
        .summary-card.total strong {
            color: var(--secondary-color);
        }

/* EMI Schedule Table */
        .amortization-container h2 { text-align: center; margin-top: 20px; margin-bottom: 20px; }
        .table-wrapper { max-height: 600px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 8px; }
        body.dark-mode .table-wrapper { border-color: #343a40; }
        
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 5px 10px; text-align: right; border-bottom: 1px solid #dee2e6; }
        body.dark-mode th, body.dark-mode td { border-bottom: 1px solid #343a40; }
        th { background-color: var(--primary-color); color: white; text-align: center; position: sticky; top: 0; }
        tbody tr:nth-child(even) { background-color: var(--background-color); }
        tbody tr:hover { background-color: var(--secondary-color); color: white; cursor: pointer; }
        body.dark-mode tbody tr:hover { color: #1e1e1e;}
      
      
      
      
      
      
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>VIP Loan Calculator</h2>
            <div class="theme-buttons">
                <button id="dark-mode-toggle" class="icon-button" title="Toggle Dark Mode">🌙</button>
                <button id="gradient-changer" class="icon-button" title="Change Theme Color">🎨</button>
            </div>
        </div>
        
        <div class="calculator">
             <div class="input-group">
                <label for="loan-amount">Loan Amount</label>
                <input type="range" id="loan-amount" min="1000" max="10000000" value="100000" step="1000">
                <span id="loan-amount-value" style="font-weight: 500; color: var(--primary-color);">₹1,00,000</span>
            </div>
            <div class="input-group">
                <label for="interest-rate">Interest Rate (% Per Annum)</label>
                <input type="range" id="interest-rate" min="1" max="20" value="10" step="0.1">
                <span id="interest-rate-value" style="font-weight: 500; color: var(--primary-color);">10.0%</span>
            </div>
            <div class="input-group">
                <label for="loan-tenure-years">Loan Tenure (Years & Months)</label>
                <input type="range" id="loan-tenure-years" min="0" max="30" value="5" step="1">
                <span id="loan-tenure-years-value" style="font-weight: 500; color: var(--primary-color);">5 Years</span>
                <br>
                <input type="range" id="loan-tenure-months" min="0" max="11" value="0" step="1" style="margin-top:10px;">
                <span id="loan-tenure-months-value" style="font-weight: 500; color: var(--primary-color);">0 Months</span>
            </div>
        </div>

<div class="results-area">
            <div class="loan-summary-grid">
                <div class="summary-card highlight">
                    <span>👉 Monthly EMI</span>
                    <strong id="monthly-emi">₹0.00</strong>
                </div>
                <div class="summary-card">
                    <span>Principal Amount</span>
                    <strong id="principal-amount">₹0.00</strong>
                </div>
                <div class="summary-card">
                    <span>Total Interest</span>
                    <strong id="total-interest">₹0.00</strong>
                </div>
                <div class="summary-card total">
                    <span>Total Payment</span>
                    <strong id="total-payment">₹0.00</strong>
                </div>
            </div>

<div class="amortization-container">
                <h2>Monthly Payment Schedule</h2>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>Month</th>
                                <th>Principal</th>
                                <th>Interest</th>
                                <th>Remaining Balance</th>
                            </tr>
                        </thead>
                        <tbody id="amortization-body">
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

const loanAmountValue = document.getElementById('loan-amount-value');
            const interestRateValue = document.getElementById('interest-rate-value');
            const loanTenureYearsValue = document.getElementById('loan-tenure-years-value');
            const loanTenureMonthsValue = document.getElementById('loan-tenure-months-value');

const monthlyEmi = document.getElementById('monthly-emi');
            const principalAmount = document.getElementById('principal-amount');
            const totalInterest = document.getElementById('total-interest');
            const totalPayment = document.getElementById('total-payment');
            
            const amortizationBody = document.getElementById('amortization-body');

const darkModeToggle = document.getElementById('dark-mode-toggle');
            const gradientChanger = document.getElementById('gradient-changer');

function formatToRupee(num) {
                return `₹${num.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            }

function generateAmortizationSchedule(p, r, n, emi) {
                amortizationBody.innerHTML = '';
                let balance = p;
                if (!isFinite(emi) || emi <= 0) return;

for (let i = 1; i <= n; i++) {
                    const interestForMonth = balance * r;
                    const principalForMonth = emi - interestForMonth;
                    balance -= principalForMonth;

function calculateLoan() {
                const p = parseFloat(loanAmountInput.value);
                const annualRate = parseFloat(interestRateInput.value);
                const r = annualRate / 100 / 12;
                const years = parseInt(loanTenureYearsInput.value);
                const months = parseInt(loanTenureMonthsInput.value);
                const n = years * 12 + months;

loanAmountValue.textContent = `₹${p.toLocaleString('en-IN')}`;
                interestRateValue.textContent = `${annualRate.toFixed(1)}%`;
                loanTenureYearsValue.textContent = `${years} Year${years !== 1 ? 's' : ''}`;
                loanTenureMonthsValue.textContent = `${months} Month${months !== 1 ? 's' : ''}`;

if (n > 0 && r > 0) {
                    const emi = p * r * (Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
                    const totalAmount = emi * n;
                    const interest = totalAmount - p;

monthlyEmi.textContent = formatToRupee(emi);
                    principalAmount.textContent = formatToRupee(p);
                    totalInterest.textContent = formatToRupee(interest);
                    totalPayment.textContent = formatToRupee(totalAmount);

generateAmortizationSchedule(p, r, n, emi);
                } else {
                    monthlyEmi.textContent = '₹0.00';
                    principalAmount.textContent = formatToRupee(p);
                    totalInterest.textContent = '₹0.00';
                    totalPayment.textContent = formatToRupee(p);
                    amortizationBody.innerHTML = '<tr><td colspan="4" style="text-align:center;">Please select a valid tenure and interest rate.</td></tr>';
                }
            }

[loanAmountInput, interestRateInput, loanTenureYearsInput, loanTenureMonthsInput].forEach(input => {
                input.addEventListener('input', calculateLoan);
            });

darkModeToggle.addEventListener('click', () => {
                document.body.classList.toggle('dark-mode');
            });

const gradients = [
                ['#e0eafc', '#cfdef3'], ['#ffdde1', '#ee9ca7'], ['#d4fc79', '#96e6a1'],
                ['#a1c4fd', '#c2e9fb'], ['#f6d365', '#fda085']
            ];
            let currentGradient = 0;

gradientChanger.addEventListener('click', () => {
                currentGradient = (currentGradient + 1) % gradients.length;
                const newGradient = `linear-gradient(to right, ${gradients[currentGradient][0]}, ${gradients[currentGradient][1]})`;
                document.body.style.setProperty('--gradient-start', gradients[currentGradient][0]);
                document.body.style.setProperty('--gradient-end', gradients[currentGradient][1]);
                document.body.style.backgroundImage = newGradient;
            });

calculateLoan();
        });
    </script>
</body>
</html>

ISRAR SEO TOOLS

Loan EMI Calculator Calculate EMI on Home, Car and Personal Loans

Author Name -Israr Ahmad

Israr Ahmad, founder of Israr SEO Tool, is a digital entrepreneur on a mission to simplify SEO. He creates tools and content to help everyone grow online with ease, discipline, and motivation. tep hota hai discipline aur motivation...

Popular tools

Best Tools

Random Tools

About Us

Follow Us

Footer Copyright

Contact Form