Loan EMI Calculator
* {
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%;
}
}
Loan EMI Calculator
Calculate your monthly installments effortlessly
Loan Amount (₹)
i
The total amount you wish to borrow
₹10,000
₹50,00,000
Annual Interest Rate (%)
i
The annual interest rate on your loan
1%
20%
Loan Tenure (Years)
i
The duration of your loan in years
1 Year
30 Years
Reset All
EMI Details
Monthly
Yearly
EMI Amount
₹12,133
per month
Total Amount
₹14,55,960
Total Interest
₹4,55,960
Payment Breakdown
Download PDF
Share Results
Results are approximate. Consult your bank for exact figures.
// 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();
});
Enter fullscreen mode
Exit fullscreen mode