<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loan EMI Calculator</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background-color: #F5F7FA; color: #333; line-height: 1.6; } h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; font-weight: 700; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { background: linear-gradient(to right, #2A6BFF, #4A90E2); color: white; padding: 30px; border-radius: 10px 10px 0 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .header h1 { font-size: 2.5rem; margin-bottom: 10px; } .header p { font-size: 1.2rem; opacity: 0.9; } .flex-container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .card { background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 25px; flex: 1 1 300px; } .blue-card { background: #2A6BFF; color: white; } .input-group { margin-bottom: 25px; } .input-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .input-label label { font-weight: 600; font-size: 1rem; } .info-icon { position: relative; display: inline-block; width: 18px; height: 18px; background: #e0e0e0; border-radius: 50%; text-align: center; line-height: 18px; font-size: 12px; cursor: pointer; } .info-icon:hover .tooltip { display: block; } .tooltip { display: none; position: absolute; right: 0; top: 25px; width: 200px; background: #333; color: white; padding: 8px; border-radius: 4px; font-size: 0.8rem; z-index: 100; } input[type="number"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; margin-bottom: 10px; } input[type="range"] { width: 100%; margin: 10px 0; -webkit-appearance: none; appearance: none; height: 6px; background: #ddd; border-radius: 5px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #2A6BFF; border-radius: 50%; cursor: pointer; } .range-marks { display: flex; justify-content: space-between; font-size: 0.8rem; color: #777; } .emi-details { margin-bottom: 30px; } .emi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .toggle-view { display: flex; background: rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 3px; } .toggle-btn { padding: 8px 15px; border-radius: 20px; border: none; background: transparent; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s; } .toggle-btn.active { background: white; color: #2A6BFF; } .emi-amount { margin-bottom: 20px; } .emi-amount .label { font-size: 0.9rem; opacity: 0.8; } .emi-amount .value { font-size: 2.2rem; font-weight: bold; } .emi-amount .period { font-size: 0.9rem; opacity: 0.8; margin-left: 5px; } .emi-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .summary-item .label { font-size: 0.9rem; opacity: 0.8; } .summary-item .value { font-size: 1.5rem; font-weight: 600; } .interest-value { color: #FF6B6B; } .chart-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .chart-wrapper { flex: 1 1 45%; min-height: 250px; } .button-group { display: flex; justify-content: space-between; margin-top: 20px; } .btn { padding: 10px 15px; border-radius: 5px; border: none; font-weight: 600; cursor: pointer; transition: background 0.3s; } .btn-blue { background: #2A6BFF; color: white; } .btn-blue:hover { background: #1a5ad9; } .btn-green { background: #4CAF50; color: white; } .btn-green:hover { background: #3d8b40; } .btn-gray { background: #e0e0e0; color: #333; } .btn-gray:hover { background: #d0d0d0; } .disclaimer { text-align: center; font-size: 0.85rem; color: #777; margin-top: 20px; } @media (max-width: 768px) { .flex-container { flex-direction: column; } .chart-container { flex-direction: column; } .chart-wrapper { width: 100%; } } </style> </head> <body> <div class="container"> <!-- Header Section --> <div class="header"> <h1>Loan EMI Calculator</h1> <p>Calculate your monthly installments effortlessly</p> </div> <div class="flex-container"> <!-- Input Section --> <div class="card"> <div class="input-group"> <div class="input-label"> <label>Loan Amount (₹)</label> <div class="info-icon">i <div class="tooltip">The total amount you wish to borrow</div> </div> </div> <input type="number" id="loan-amount" value="1000000" min="10000" max="5000000" step="10000"> <input type="range" id="loan-amount-slider" min="10000" max="5000000" step="10000" value="1000000"> <div class="range-marks"> <span>₹10,000</span> <span>₹50,00,000</span> </div> </div> <div class="input-group"> <div class="input-label"> <label>Annual Interest Rate (%)</label> <div class="info-icon">i <div class="tooltip">The annual interest rate on your loan</div> </div> </div> <input type="number" id="interest-rate" value="8" min="1" max="20" step="0.1"> <input type="range" id="interest-rate-slider" min="1" max="20" step="0.1" value="8"> <div class="range-marks"> <span>1%</span> <span>20%</span> </div> </div> <div class="input-group"> <div class="input-label"> <label>Loan Tenure (Years)</label> <div class="info-icon">i <div class="tooltip">The duration of your loan in years</div> </div> </div> <input type="number" id="loan-tenure" value="10" min="1" max="30"> <input type="range" id="loan-tenure-slider" min="1" max="30" step="1" value="10"> <div class="range-marks"> <span>1 Year</span> <span>30 Years</span> </div> </div> <button id="reset-btn" class="btn btn-gray" style="width: 100%;">Reset All</button> </div> <!-- Results Section --> <div class="card blue-card"> <div class="emi-details"> <div class="emi-header"> <h2>EMI Details</h2> <div class="toggle-view"> <button id="monthly-btn" class="toggle-btn active">Monthly</button> <button id="yearly-btn" class="toggle-btn">Yearly</button> </div> </div> <div class="emi-amount"> <div class="label">EMI Amount</div> <span class="value" id="emi-value">₹12,133</span> <span class="period" id="emi-period">per month</span> </div> <div class="emi-summary"> <div class="summary-item"> <div class="label">Total Amount</div> <div class="value" id="total-payment">₹14,55,960</div> </div> <div class="summary-item"> <div class="label">Total Interest</div> <div class="value interest-value" id="total-interest">₹4,55,960</div> </div> </div> </div> </div> </div> <!-- Charts Section --> <div class="card" style="margin-top: 20px;"> <h2 style="margin-bottom: 20px;">Payment Breakdown</h2> <div class="chart-container"> <div class="chart-wrapper"> <canvas id="pieChart"></canvas> </div> <div class="chart-wrapper"> <canvas id="lineChart"></canvas> </div> </div> <div class="button-group"> <button id="download-btn" class="btn btn-blue">Download PDF</button> <button id="share-btn" class="btn btn-green">Share Results</button> </div> </div> <p class="disclaimer">Results are approximate. Consult your bank for exact figures.</p> </div> <script> // DOM Elements const loanAmountInput = document.getElementById('loan-amount'); const loanAmountSlider = document.getElementById('loan-amount-slider'); const interestRateInput = document.getElementById('interest-rate'); const interestRateSlider = document.getElementById('interest-rate-slider'); const loanTenureInput = document.getElementById('loan-tenure'); const loanTenureSlider = document.getElementById('loan-tenure-slider'); const emiValue = document.getElementById('emi-value'); const emiPeriod = document.getElementById('emi-period'); const totalPayment = document.getElementById('total-payment'); const totalInterest = document.getElementById('total-interest'); const monthlyBtn = document.getElementById('monthly-btn'); const yearlyBtn = document.getElementById('yearly-btn'); const resetBtn = document.getElementById('reset-btn'); const downloadBtn = document.getElementById('download-btn'); const shareBtn = document.getElementById('share-btn'); // State variables let loanAmount = 1000000; let interestRate = 8; let loanTenure = 10; let monthlyEMI = 0; let totalAmount = 0; let totalInterestAmount = 0; let isMonthlyView = true; let pieChartInstance = null; let lineChartInstance = null; // Initialize charts function initCharts() { // Pie Chart const pieCtx = document.getElementById('pieChart').getContext('2d'); pieChartInstance = new Chart(pieCtx, { type: 'pie', data: { labels: ['Principal', 'Interest'], datasets: [{ data: [loanAmount, totalInterestAmount], backgroundColor: ['#2A6BFF', '#FF6B6B'], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'bottom' }, tooltip: { callbacks: { label: function(context) { return context.label + ': ' + formatCurrency(context.raw); } } } } } }); // Line Chart const yearlyData = generateYearlyData(); const lineCtx = document.getElementById('lineChart').getContext('2d'); lineChartInstance = new Chart(lineCtx, { type: 'line', data: { labels: yearlyData.map(item => 'Year ' + item.year), datasets: [ { label: 'Principal Paid', data: yearlyData.map(item => item.principalPaid), borderColor: '#2A6BFF', backgroundColor: 'rgba(42, 107, 255, 0.1)', tension: 0.1 }, { label: 'Interest Paid', data: yearlyData.map(item => item.interestPaid), borderColor: '#FF6B6B', backgroundColor: 'rgba(255, 107, 107, 0.1)', tension: 0.1 } ] }, options: { responsive: true, plugins: { legend: { position: 'bottom' }, tooltip: { callbacks: { label: function(context) { return context.dataset.label + ': ' + formatCurrency(context.raw); } } } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value) { return '₹' + value/100000 + 'L'; } } } } } }); } // Calculate EMI function calculateEMI() { const principal = loanAmount; const rate = interestRate / 12 / 100; // Monthly interest rate const time = loanTenure * 12; // Total months monthlyEMI = principal * rate * Math.pow(1 + rate, time) / (Math.pow(1 + rate, time) - 1); totalAmount = monthlyEMI * time; totalInterestAmount = totalAmount - principal; updateUI(); updateCharts(); } // Generate yearly data for charts function generateYearlyData() { const monthlyRate = interestRate / 12 / 100; const months = loanTenure * 12; let remainingPrincipal = loanAmount; const yearlyData = []; let yearlyPrincipal = 0; let yearlyInterest = 0; let currentYear = 1; for (let i = 1; i <= months; i++) { const interestForMonth = remainingPrincipal * monthlyRate; const principalForMonth = monthlyEMI - interestForMonth; yearlyPrincipal += principalForMonth; yearlyInterest += interestForMonth; remainingPrincipal -= principalForMonth; if (i % 12 === 0 || i === months) { yearlyData.push({ year: currentYear, principalPaid: yearlyPrincipal, interestPaid: yearlyInterest, totalPaid: yearlyPrincipal + yearlyInterest, remainingPrincipal: remainingPrincipal }); currentYear++; yearlyPrincipal = 0; yearlyInterest = 0; } } return yearlyData; } // Update UI with calculated values function updateUI() { emiValue.textContent = formatCurrency(isMonthlyView ? monthlyEMI : monthlyEMI * 12); emiPeriod.textContent = isMonthlyView ? 'per month' : 'per year'; totalPayment.textContent = formatCurrency(totalAmount); totalInterest.textContent = formatCurrency(totalInterestAmount); } // Update charts with new data function updateCharts() { if (pieChartInstance) { pieChartInstance.data.datasets[0].data = [loanAmount, totalInterestAmount]; pieChartInstance.update(); } if (lineChartInstance) { const yearlyData = generateYearlyData(); lineChartInstance.data.labels = yearlyData.map(item => 'Year ' + item.year); lineChartInstance.data.datasets[0].data = yearlyData.map(item => item.principalPaid); lineChartInstance.data.datasets[1].data = yearlyData.map(item => item.interestPaid); lineChartInstance.update(); } } // Format currency values function formatCurrency(amount) { return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(amount); } // Event listeners loanAmountInput.addEventListener('input', function() { loanAmount = Number(this.value); loanAmountSlider.value = loanAmount; calculateEMI(); }); loanAmountSlider.addEventListener('input', function() { loanAmount = Number(this.value); loanAmountInput.value = loanAmount; calculateEMI(); }); interestRateInput.addEventListener('input', function() { interestRate = Number(this.value); interestRateSlider.value = interestRate; calculateEMI(); }); interestRateSlider.addEventListener('input', function() { interestRate = Number(this.value); interestRateInput.value = interestRate; calculateEMI(); }); loanTenureInput.addEventListener('input', function() { loanTenure = Number(this.value); loanTenureSlider.value = loanTenure; calculateEMI(); }); loanTenureSlider.addEventListener('input', function() { loanTenure = Number(this.value); loanTenureInput.value = loanTenure; calculateEMI(); }); monthlyBtn.addEventListener('click', function() { if (!isMonthlyView) { isMonthlyView = true; monthlyBtn.classList.add('active'); yearlyBtn.classList.remove('active'); updateUI(); } }); yearlyBtn.addEventListener('click', function() { if (isMonthlyView) { isMonthlyView = false; yearlyBtn.classList.add('active'); monthlyBtn.classList.remove('active'); updateUI(); } }); resetBtn.addEventListener('click', function() { loanAmount = 1000000; interestRate = 8; loanTenure = 10; loanAmountInput.value = loanAmount; loanAmountSlider.value = loanAmount; interestRateInput.value = interestRate; interestRateSlider.value = interestRate; loanTenureInput.value = loanTenure; loanTenureSlider.value = loanTenure; calculateEMI(); }); downloadBtn.addEventListener('click', function() { alert('Download functionality would be implemented here'); }); shareBtn.addEventListener('click', function() { alert('Share functionality would be implemented here'); }); // Initialize window.addEventListener('DOMContentLoaded', function() { calculateEMI(); initCharts(); }); </script> </body> </html> 
Girish Lade
Posted on
loan emi calculator html
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)