An EMI calculator is a tool used to estimate the Equated Monthly Installment (EMI) for a loan. It requires inputs such as the loan amount, interest rate, and loan tenure to calculate the monthly installment that needs to be paid towards the loan. This tool helps borrowers plan their finances by providing an approximation of their monthly repayment obligations.
EMI Calculator
| Monthly Payment | Total Interest Paid |
|---|---|
| 5000 INR | 0 INR |
<section class="emi-cal">
<div id="calculator">
<h2>EMI Calculator</h2>
<label for="loanAmount">Loan Amount: <span id="loanAmountLabel">10000</span> INR</label>
<input type="range" id="loanAmount" min="10000" max="5000000" step="10000" value="100000">
<label for="loanTerm">Loan Term: <span id="loanTermLabel">12</span> Year</label>
<input type="range" id="loanTerm" min="1" max="20" step="1" value="12">
<label for="interestRate">Interest Rate: <span id="interestRateLabel">12</span>%</label>
<input type="range" id="interestRate" min="5" max="20" step="0.1" value="12">
<div class="total-amount">
<table class="total-table">
<tr>
<th> Monthly Payment</th>
<th>Total Interest Paid </th>
</tr>
<tr>
<td><span for="monthlyPayment"><span id="monthlyPaymentLabel">5000</span> INR</span></td>
<td><span for="totalInterest"><span id="totalInterestLabel">0</span> INR</span> </td>
</tr>
</table>
</div>
</div>
</section>
<style>
.emi-cal {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
font-size: 18px;
line-height: 15px;
font-weight: 700;
justify-content: center;
height: 100vh;
}
#calculator {
width:500px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.emi-cal h2 {
color: #333;
}
.emi-cal label {
display: block;
margin-top: 10px;
}
.emi-cal input[type="range"] {
width: 80%;
margin: 10px auto;
display: block;
}
.total-amount {
display: grid;
justify-content: center;
margin-top:20px;
}
.total-amount table tr{
margin:0px;
pading:0px;
}
table.total-table {
background-color: #edf6ff;
border: solid 0px;
padding-top: 13px;
border-radius: 10px;
}
.total-table th,td{
padding: 10px 43px 13px 24px;
font-size:18px;
line-height: 15px;
font-weight: 700;
}
.emi-cal input {
--c: orange; /* active color */
--g:5px; /* the gap */
--l:10px; /* line thickness*/
--s: 20px; /* thumb size*/
width: 400px;
height: var(--s); /* needed for Firefox*/
--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
-webkit-appearance :none;
-moz-appearance :none;
appearance :none;
background: none;
cursor: pointer;
overflow: hidden;
}
.emi-cal input[type="range" i]::-webkit-slider-thumb{
height: var(--s);
aspect-ratio: 1;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
-webkit-appearance: none;
appearance: none;
transition: .3s;
}
</style>
<script>
function updateEMI() {
var loanAmount = parseInt(document.getElementById('loanAmount').value);
var loanTerm = parseInt(document.getElementById('loanTerm').value);
var interestRate = parseFloat(document.getElementById('interestRate').value);
document.getElementById('loanAmountLabel').innerHTML = formatNumber(loanAmount);
document.getElementById('loanTermLabel').innerHTML = loanTerm + (loanTerm > 1 ? ' years' : ' year');
document.getElementById('interestRateLabel').innerHTML = interestRate.toFixed(1);
var monthlyInterestRate = interestRate / 100 / 12;
var numberOfPayments = loanTerm * 12;
var numerator = Math.pow(1 + monthlyInterestRate, numberOfPayments);
var denominator = numerator - 1;
var emi = (loanAmount * monthlyInterestRate * numerator) / denominator;
var totalRepayment = emi * numberOfPayments;
var totalInterest = totalRepayment - loanAmount;
document.getElementById('monthlyPaymentLabel').innerHTML = formatNumber(emi.toFixed(2));
document.getElementById('totalInterestLabel').innerHTML = formatNumber(totalInterest.toFixed(2));
}
// Attach the updateEMI function to the change event of the sliders
document.getElementById('loanAmount').addEventListener('input', updateEMI);
document.getElementById('loanTerm').addEventListener('input', updateEMI);
document.getElementById('interestRate').addEventListener('input', updateEMI);
// Initial update when the page loads
updateEMI();
function formatNumber(number) {
// Check if the number is greater than or equal to 1000
const parts = number.toString().split('.');
// Add commas for thousands separator
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// Join integer and decimal parts and return
return parts.join('.');
}
</script>
Tags - interest calculation,loan interest calculation,interest calculation app,loan interest calculation app,लोन पर ब्याज कैसे निकाले,गाड़ी फाइनेंस पर ब्याज कैसे निकाले,emi calculator,emi calculator for home loan,home loan emi calculation formula with example,emi,loan emi calculator,emi calculation in hindi,how to calculate loan emi,what is emi,trick to find emi using calculator,calculator all tips and tricks in hindi,What is EMI and how is it calculated,emi kaise pay ki jati hai,emi ki calculation kaise karte hai,technology news,loan ki calcualtion kaise kare,How to calculate emi amount,emi calculator for bike loan,emi calculator app,emi calculator for personal loan,emi calculator for mobile phone,how to calculate emi on car loan.
0 Comments