Features of the Personal Loan EMI Calculator
- User-Friendly Input Sliders and Fields
Users can adjust loan amount, interest rate, and loan tenure either by typing values into input fields or by using sliders for a more interactive experience. The current values display dynamically, helping users visualize their selections. - Responsive EMI Calculation
The “Calculate EMI” button calculates the monthly EMI, total payment, and total interest based on user input. The results appear immediately below, ensuring quick feedback and a seamless user experience. - Detailed Monthly Payment Schedule
A payment schedule displays the EMI breakdown for each month, giving users a clear picture of their loan repayment plan over time. This table updates automatically after each calculation. - Dark Mode Toggle
The “Toggle Dark Mode” button allows users to switch between light and dark themes, making the calculator accessible and comfortable for different lighting environments. - Real-Time Data Visualization with Charts
Using embedded charting, the calculator displays a chart of total payment versus interest. This visualization enhances user understanding by showing the interest proportion relative to the principal amount. - Interactive Reset Function
A reset button restores all input fields and results to default values, letting users start fresh without manually clearing entries, which improves the ease of testing different scenarios. - Glowing Animation and Visual Effects
A subtle glow animation on headings and hover effects on inputs and buttons creates an engaging, visually appealing interface, giving the tool a polished look. - Footer with Financial Advice Note
The footer includes a financial planning note, reminding users of the importance of careful financial planning, which adds value by encouraging responsible usage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Loan EMI Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
padding: 20px;
max-width: 800px;
margin: auto;
text-align: center;
transition: background-color 0.5s;
}
h1 {
margin-bottom: 20px;
color: #4CAF50;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
}
.container {
margin: 20px 0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.container:hover {
transform: scale(1.02);
}
label {
font-size: 18px;
margin-top: 10px;
display: block;
}
input[type="number"],
select {
width: calc(100% - 22px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border 0.3s;
}
input[type="number"]:focus,
select:focus {
border: 2px solid #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
.slider {
width: 100%;
margin: 10px 0;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 5px;
transition: background 0.3s, transform 0.2s;
}
button:hover {
background-color: #388E3C;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.result-card {
background-color: #e9f5ee;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
text-align: left;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
.chart-container {
position: relative;
margin-top: 20px;
}
canvas {
max-width: 100%;
}
.footer {
margin-top: 20px;
font-size: 14px;
color: #777;
}
@keyframes glow {
0% {
text-shadow: 0 0 5px #4CAF50, 0 0 10px #4CAF50, 0 0 15px #4CAF50, 0 0 20px #4CAF50;
}
100% {
text-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50, 0 0 30px #4CAF50, 0 0 40px #4CAF50;
}
}
.glow {
animation: glow 1s infinite alternate;
}
/* Add glowing effect to inputs and buttons */
input[type="number"]:hover,
select:hover,
button:hover {
box-shadow: 0 0 15px rgba(76, 175, 80, 1);
}
/* Dark Mode Styles */
body.dark-mode {
background-color: #2c2c2c;
color: #f1f1f1;
}
.dark-mode .container {
background-color: #3c3c3c;
border: 1px solid #444;
}
.dark-mode .result-card {
background-color: #444;
border: 1px solid #555;
}
.dark-mode .footer {
color: #aaa;
}
.dark-mode button {
background-color: #555;
color: #fff;
}
.dark-mode button:hover {
background-color: #666;
}
</style>
</head>
<body>
<h1 class="glow">Personal Loan EMI Calculator 🏦💰</h1>
<div class="container">
<label for="loanAmount">Loan Amount (₹):</label>
<input type="number" id="loanAmount" placeholder="Enter loan amount" required>
<input type="range" class="slider" id="loanAmountSlider" min="10000" max="1000000" value="500000" step="10000">
<p>Current Loan Amount: ₹<span id="loanAmountDisplay">500000</span></p>
<label for="interestRate">Interest Rate (% per annum):</label>
<input type="number" id="interestRate" placeholder="Enter interest rate" required>
<input type="range" class="slider" id="interestRateSlider" min="0" max="20" value="10" step="0.1">
<p>Current Interest Rate: <span id="interestRateDisplay">10</span>%</p>
<label for="loanTenure">Loan Tenure (months):</label>
<input type="number" id="loanTenure" placeholder="Enter loan tenure in months" required>
<input type="range" class="slider" id="loanTenureSlider" min="6" max="60" value="24" step="1">
<p>Current Loan Tenure: <span id="loanTenureDisplay">24</span> months</p>
<button id="calculateBtn">Calculate EMI 📊</button>
<button id="resetBtn">Reset 🔄</button>
<button id="toggleModeBtn">Toggle Dark Mode 🌙</button>
<div id="emiResult" class="hidden"></div>
<div id="monthlySchedule" class="hidden"></div>
<div class="chart-container">
<canvas id="emiChart" class="hidden"></canvas>
<canvas id="paymentChart" class="hidden"></canvas>
</div>
</div>
<div class="footer">💡 *Your personal loan EMI calculations are tracked for better financial planning.*</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const calculateBtn = document.getElementById('calculateBtn');
const resetBtn = document.getElementById('resetBtn');
const toggleModeBtn = document.getElementById('toggleModeBtn');
const emiResult = document.getElementById('emiResult');
const monthlySchedule = document.getElementById('monthlySchedule');
const loanAmountSlider = document.getElementById('loanAmountSlider');
const interestRateSlider = document.getElementById('interestRateSlider');
const loanTenureSlider = document.getElementById('loanTenureSlider');
const loanAmountDisplay = document.getElementById('loanAmountDisplay');
const interestRateDisplay = document.getElementById('interestRateDisplay');
const loanTenureDisplay = document.getElementById('loanTenureDisplay');
let isDarkMode = false;
loanAmountSlider.addEventListener('input', updateLoanAmount);
interestRateSlider.addEventListener('input', updateInterestRate);
loanTenureSlider.addEventListener('input', updateLoanTenure);
calculateBtn.addEventListener('click', calculateEMI);
resetBtn.addEventListener('click', resetCalculator);
toggleModeBtn.addEventListener('click', toggleDarkMode);
function updateLoanAmount() {
loanAmountDisplay.textContent = loanAmountSlider.value;
document.getElementById('loanAmount').value = loanAmountSlider.value;
}
function updateInterestRate() {
interestRateDisplay.textContent = interestRateSlider.value;
document.getElementById('interestRate').value = interestRateSlider.value;
}
function updateLoanTenure() {
loanTenureDisplay.textContent = loanTenureSlider.value;
document.getElementById('loanTenure').value = loanTenureSlider.value;
}
function calculateEMI() {
const principal = parseFloat(loanAmountSlider.value);
const interestRate = parseFloat(interestRateSlider.value) / (12 * 100); // monthly interest
const tenure = parseInt(loanTenureSlider.value);
if (isNaN(principal) || isNaN(interestRate) || isNaN(tenure) || principal <= 0 || interestRate <= 0 || tenure <= 0) {
alert("Please enter valid values.");
return;
}
const emi = (principal * interestRate * Math.pow(1 + interestRate, tenure)) / (Math.pow(1 + interestRate, tenure) - 1);
const totalPayment = emi * tenure;
const totalInterest = totalPayment - principal;
displayResults(totalPayment, totalInterest, emi);
drawChart(totalPayment, totalInterest);
displayMonthlySchedule(emi, tenure);
}
function displayResults(totalPayment, totalInterest, emi) {
emiResult.innerHTML = `
<div class="result-card">
<h3>EMI Calculation Results 📈</h3>
<p>Monthly EMI: <strong>₹${emi.toFixed(2)}</strong></p>
<p>Total Payment: <strong>₹${totalPayment.toFixed(2)}</strong></p>
<p>Total Interest Payable: <strong>₹${totalInterest.toFixed(2)}</strong></p>
</div>
`;
emiResult.classList.remove('hidden');
}
function displayMonthlySchedule(emi, tenure) {
monthlySchedule.innerHTML = `<h3>Monthly Payment Schedule 📅</h3><table><tr><th>Month</th><th>EMI (₹)</th></tr>`;
for (let month = 1; month <= tenure; month++) {
monthlySchedule.innerHTML += `<tr><td>${month}</td><td>${emi.toFixed(2)}</td></tr>`;
}
monthlySchedule.innerHTML += `</table>`;
monthlySchedule.classList.remove('hidden');
}
function resetCalculator() {
loanAmountSlider.value = 500000;
interestRateSlider.value = 10;
loanTenureSlider.value = 24;
updateLoanAmount();
updateInterestRate();
updateLoanTenure();
emiResult.classList.add('hidden');
monthlySchedule.classList.add('hidden');
const emiChart = document.getElementById('emiChart');
const ctx = emiChart.getContext('2d');
ctx.clearRect(0, 0, emiChart.width, emiChart.height);
emiChart.classList.add('hidden');
const paymentChart = document.getElementById('paymentChart');
const ctxPayment = paymentChart.getContext('2d');
ctxPayment.clearRect(0, 0, paymentChart.width, paymentChart.height);
paymentChart.classList.add('hidden');
}
function drawChart(totalPayment, totalInterest) {
const emiChart = document.getElementById('emiChart');
const ctx = emiChart.getContext('2d');
const data = {
labels: ['Total Payment', 'Total Interest'],
datasets: [{
data: [totalPayment, totalInterest],
backgroundColor: ['#4CAF50', '#FF9800'],
hoverBackgroundColor: ['#388E3C', '#F57C00']
}]
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
callbacks: {
label: function (tooltipItem) {
return `${tooltipItem.label}: ₹${tooltipItem.raw.toFixed(2)}`;
}
}
}
}
};
new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
emiChart.classList.remove('hidden');
}
function drawPaymentChart(emi, tenure) {
const paymentChart = document.getElementById('paymentChart');
const ctx = paymentChart.getContext('2d');
const monthlyPayments = Array(tenure).fill(emi);
const data = {
labels: Array.from({ length: tenure }, (_, i) => `Month ${i + 1}`),
datasets: [{
label: 'Monthly EMI Payments (₹)',
data: monthlyPayments,
backgroundColor: '#2196F3',
borderColor: '#0D47A1',
borderWidth: 1,
fill: false,
tension: 0.1
}]
};
const options = {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
tooltip: {
callbacks: {
label: function (tooltipItem) {
return `${tooltipItem.label}: ₹${tooltipItem.raw.toFixed(2)}`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Amount (₹)'
}
}
}
};
new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
paymentChart.classList.remove('hidden');
}
function toggleDarkMode() {
isDarkMode = !isDarkMode;
document.body.classList.toggle('dark-mode', isDarkMode);
toggleModeBtn.innerText = isDarkMode ? 'Toggle Light Mode ☀️' : 'Toggle Dark Mode 🌙';
}
</script>
</body>
</html>
DOWNLOAD CODE
