Loan EMI Calculator Website using HTML, CSS, JavaScript and Chart.js
5 min readOct 2, 2023
Today we are going to watch how to make a loan emi calculator website using HTML, CSS, JavaScript and Chart.js.
Step 1:
First, Add the cdn link of Chart.js in your code or install chart.js locally in your device. It will be used to show to pie chart in your website. As of now today the version of chart.js is 4.4.0. It will change in future. The cdn link given below-
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
Take a look at the developed website-
I have attached the whole source code below.
You can also check out the actual live website at https://sumandey07.github.io/emi-calculator/
<style>
.loan-calculator {
font-family: "Roboto", sans-serif;
width: 740px;
margin: 24px auto;
background: #fff;
box-shadow: 0 12px 50px -11px rgba(0, 0, 0, 0.2);
border-radius: 8px;
color: #14213d;
overflow: hidden;
}
.loan-calculator,
.loan-calculator * {
box-sizing: border-box;
}
.loan-calculator .top {
background: #050A30;
color: #fff;
padding: 32px;
}
.loan-calculator .top h2 {
margin-top: 0;
}
.loan-calculator form {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
}
.loan-calculator form .group{
display: flex;
flex-direction:row;
gap: 10px;
padding-bottom: 4px;
justify-content: space-between;
}
.loan-calculator form .groups{
display:flex;
flex-direction:row;
gap: 15px;
justify-content: center;
}
.loan-calculator .title {
margin-bottom: 12px;
}
.loan-calculator form input {
font-size: 20px;
padding: 8px 20px;
border-radius: 10px;
width: 100%;
color:#000;
}
.loan-calculator .result {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px;
}
.loan-calculator .result .left {
width: 100%;
padding: 8px 32px;
}
.loan-calculator .left h3 {
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;
}
.loan-calculator .result .value {
font-size: 30px;
font-weight: 900;
padding-bottom: 10px;
border-bottom: 1px solid rgba(20, 33, 61, 0.2);
}
.loan-calculator .result .value::before {
content: "\20B9";
font-size: 27px;
font-weight: 400;
margin-right: 6px;
opacity: 0.4;
}
.loan-calculator .group1{
padding-top: 32px;
text-align: center;
}
.loan-calculator .group1 .calculate-btn {
background: #e63946;
color: #fff;
border: none;
padding: 8px 32px;
border-radius: 8px;
font-size: 18px;
font-weight: 900;
cursor: pointer;
margin: 24px 0;
}
.loan-calculator .right {
width: 50%;
}
@media (max-width: 650px) {
.loan-calculator {
width: 90%;
max-width: 500px;
min-height: 1400px;
}
.loan-calculator form .group {
flex-direction: column;
gap: 20px;
}
.loan-calculator form .groups {
flex-direction: column;
gap: 20px;
}
.loan-calculator .result {
flex-direction: column;
text-align: center;
}
}
</style>
<div class="loan-calculator">
<div class="top">
<h2>Loan EMI Calculator</h2>
<form action="#">
<div class="group">
<div>
<div class="title">Amount (A)</div>
<input class="loan-amount" type="text" value="30000" />
</div>
<div>
<div class="title">Interest Rate (R) (in %)</div>
<input class="interest-rate" type="text" value="8.5" />
</div>
<div>
<div class="title">Tenure (T) (in months)</div>
<input class="loan-tenure" type="text" value="240" />
</div>
</div>
<div class="groups">
<div>
<div class="title">Processing Fees (P) (in %)</div>
<input class="processing-fee" type="text" value="1.2" />
</div>
<div>
<div class="title">Down Payment (D)</div>
<input class="down-payment" type="text" value="3000" />
</div>
</div>
</form>
<div class="group1">
<button class="calculate-btn">Calculate</button>
</div>
</div>
<div class="result">
<div class="left">
<div class="total-down-payment">
<h3>Total Down Payment (TDP)<br/>(TDP = D + P)</h3>
<div class="value">12</div>
</div>
<div class="loan-emi">
<h3>Loan EMI (LE)<br/>(PLA= A - D)<br/>(PLA = Principal Loan Amount)<br/>(LE = [PLA x R x (1+R)^T]/[(1+R)^T-1] )</h3>
<div class="value">123</div>
</div>
<div class="total-interest">
<h3>Total Interest Payable (TIP)<br/> (TIP = LE * T)</h3>
<div class="value">1234</div>
</div>
<div class="total-amount">
<h3>Total Payment (TP)<br/>(TP = LA + TIP + P)</h3>
<div class="value">12345</div>
</div>
</div>
<div class="right">
<canvas height="400" id="myChart" width="400"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script>
const loanAmountInput = document.querySelector(".loan-amount");
const interestRateInput = document.querySelector(".interest-rate");
const loanTenureInput = document.querySelector(".loan-tenure");
const processingFeeInput = document.querySelector(".processing-fee");
const downPaymentInput = document.querySelector(".down-payment");
const loanEMIValue = document.querySelector(".loan-emi .value");
const totalInterestValue = document.querySelector(".total-interest .value");
const totalAmountValue = document.querySelector(".total-amount .value");
const totalDownPaymentValue = document.querySelector(".total-down-payment .value");
const calculateBtn = document.querySelector(".calculate-btn");
let loanAmount = parseFloat(loanAmountInput.value);
let newAmount = 0;
for(let i=0;i<1;i++){
newAmount = loanAmount;
}
let interestRate = parseFloat(interestRateInput.value);
let loanTenure = parseFloat(loanTenureInput.value);
let processingFee = parseFloat(processingFeeInput.value);
let downPayment = parseFloat(downPaymentInput.value);
let interest = interestRate / 12 / 100;
let processFee = processingFee / 100;
let myChart;
const checkValues = () => {
let loanAmountValue = loanAmountInput.value;
let interestRateValue = interestRateInput.value;
let loanTenureValue = loanTenureInput.value;
let processingFeeValue = processingFeeInput.value;
let downPaymentValue = downPaymentInput.value;
let regexNumber = /^[0-9]+$/;
if (!loanAmountValue.match(regexNumber)) {
loanAmountInput.value = "20000";
}
if ((!loanTenureValue.match(regexNumber)) || (loanTenureValue>360)) {
loanTenureInput.value = "180";
}
if ((!downPaymentValue.match(regexNumber)) || (downPaymentValue > newAmount)) {
downPaymentInput.value = "2000";
}
let regexDecimalNumber = /^(\d*\.)?\d+$/;
if (!interestRateValue.match(regexDecimalNumber)) {
interestRateInput.value = "7.5";
}
if (!processingFeeValue.match(regexDecimalNumber)) {
processingFeeInput.value = "1.2";
}
};
const displayChart = (totalInterestPayableValue,processingFees) => {
const ctx = document.getElementById("myChart").getContext("2d");
myChart = new Chart(ctx, {
type: "pie",
data: {
labels: ["Total Interest", "Principal Loan Amount","Processing Fees"],
datasets: [
{
data: [totalInterestPayableValue, loanAmount, processingFees],
backgroundColor: ["#e63946", "#050A30","#ff7415"],
borderWidth: 0,
},
],
},
});
};
const updateChart = (totalInterestPayableValue,processingFees) => {
myChart.data.datasets[0].data[0] = totalInterestPayableValue;
myChart.data.datasets[0].data[1] = loanAmount;
myChart.data.datasets[0].data[2] = processingFees;
myChart.update();
};
const refreshInputValues = () => {
loanAmount = parseFloat(loanAmountInput.value);
interestRate = parseFloat(interestRateInput.value);
loanTenure = parseFloat(loanTenureInput.value);
processingFee = parseFloat(processingFeeInput.value);
downPayment = parseFloat(downPaymentInput.value);
interest = interestRate / 12 / 100;
processFee = processingFee / 100;
};
const calculateEMI = () => {
checkValues();
refreshInputValues();
loanAmount = loanAmount - downPayment;
let emi =
loanAmount *
interest *
(Math.pow(1 + interest, loanTenure) /
(Math.pow(1 + interest, loanTenure) - 1));
return emi;
};
const updateData = (emi) => {
loanEMIValue.innerHTML = Math.ceil(emi);
let processingFees = Math.ceil(loanAmount * processFee);
let totalDownPay = Math.ceil(downPayment + processingFees);
totalDownPaymentValue.innerHTML = totalDownPay;
let totalAmount = Math.ceil(loanTenure * emi);
totalAmountValue.innerHTML = totalAmount;
let totalInterestPayable = Math.ceil(totalAmount - loanAmount);
totalInterestValue.innerHTML = totalInterestPayable;
if (myChart) {
updateChart(totalInterestPayable,processingFees);
} else {
displayChart(totalInterestPayable,processingFees);
}
};
const init = () => {
let emi = calculateEMI();
updateData(emi);
};
init();
calculateBtn.addEventListener("click", init);
</script>That’s it. Now, you are ready to deploy your own Loan EMI Calculator website using HTML, CSS, JavaScript and Chart.js .
If you like this story and want to get more of this type then don’t forget to follow me on GitHub .