Code an EMI Loan Calculator (Beginners Guide)
Abigirl Muchineripi
Definition
To ensure that we are all on the same page, I will start by defining the term loan. A loan is an amount of money that one party lends to another party with the consent of repayment at a specified interest rate and a given period in installments or as a lump sum. Examples of loans are car, study, medical, or mortgage loans, to mention a few, and they are legally offered by registered financial institutions like banks and microfinance companies in the traditional finance industry.
So in this article, I am going to show you how to code a simple Equated Monthly Instalments (EMI) loan calculator using Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), Javascript and BootStrap. This loan calculator will assist you in calculating the EMI per given amount, interest rate, and period.
Kindly note that our formulae are as follows:
interest = (amount * (rate * 0.01))/months;
total = ((amount/months) + interest);
Before you get into the code, the requirements that you need are a computer, an editor (I use VS Code), and a browser (Chrome is one of the best). In your editor, open a new folder, then create three new files: index.html, style.css, and app.js in it. Make sure that they have extensions at the end, e.g. .html for the HTML file... Like what I did below.
The next step is to open your index.html file, copy, paste, and save the code below. Kindly note that I have explained all the code below in the comments for you to understand what each line means.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Loan Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css"/>
<script src="app.js" defer></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 col-sm-10">
<div class="calculator" >
<h1>LOAN CALCULATOR</h1>
<!-- Calculate function refer to app.js-->
<div class="form-group">
<label for="amount">Amount (£) :</label>
<input id="amount" type="number" class="form-control"
onchange="Calculate()">
</div>
<div class="form-group">
<label for="rate">Interest Rate (%) :</label>
<input id="rate" type="number" class="form-control"
onchange="Calculate()">
</div>
<div class="form-group">
<label for="months"> Payment Period (m):</label>
<input id="months" type="number" class="form-control"
onchange="Calculate()">
</div>
<h2 id="total">EMI</h2>
</div>
</div>
<h3 id="hover" class="hover">Designer/ Dev: <a href="https://twitter.com/AbbyMuchinexy">Abigirl Muchineripi</a></h3>
</div>
</div>
</body>
</html>
The second step is to open the style.css file and do the same. You can change styles according to your preferences. Remember, the CSS file is for styling. It is time to give your app some color and shape to make it strikingly appealing in appearance. Let's get into it!
body {
background-color: rgb(163, 8, 163);
background-size: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
font-family:'Times New Roman', Times, serif;
font-weight: 600;
line-height: 2rem;
text-align:end;
justify-content:center;
font-size: 17px;
margin-top: 15px;
margin-bottom: 20px;
margin-left: -55px;
overflow: hidden;
text-overflow: ellipsis;
}
p {
font-family: 'Times New Roman', Times, serif;
font-size: medium;
font-weight: 200;
color: rgb(122, 12, 12);
text-align: center;
letter-spacing: -1.4px;
}
.form-group{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color : rgb(199, 217, 255);
font-weight: 800;
font-size: 16px;
}
.form-control{
background-color: rgb(109, 146, 126);
border-color: rgb(121, 2, 2);
border-radius: 6px;
border-width: 2px;
border-style: ridge;
width:90%;
margin-top: 8px;
}
.calculator {
width:fit-content;
height: auto;
max-width: 68%;
background-color: rgb(1, 29, 7);
position:relative;
align-items: center;
left: 50%;
top: 50%;
transform: translateX(10%) translateY(-40%);
padding: 20px; /*30px 10px 100px;*/
border-style:ridge;
border-color: rgb(87, 2, 2) ;
border-width: 5px;
border-radius:5%;
color:rgb(253, 190, 53);
box-shadow: 30px 20px 35px rgb(87, 2, 2);
}
#total{
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 18px;
font-weight: 600;
margin-top: 20%;
margin-bottom: 20%;
color:rgb(199, 217, 255);
width: fit-content;
text-align: center;
margin-left:auto;
margin-right:auto;
}
h3{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 15px;
color: rgb(34, 35, 46);
text-align: center;
padding-bottom: -15px;
}
a,.hover:hover{
font-size: 16px;
font-weight: 700;
color:rgb(99, 2, 2);
text-decoration-style: solid 1px;
transition: font-size 0.3s ease-out;
}
a{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 15px;
color: rgb(34, 35, 46);
text-align: center;
padding-bottom: -15px;
}
/* Media Queries for responsiveness */
@media only screen and (max-width: 700px) {
.calculator {
width: 80%;
left: 10%;
top: 30%;
}
}
@media only screen and (orientation: landscape) {
.calculator {
width: 70%;
left: 15%;
top: 40%;
}
}
You are getting there🎇!
Finally, use the app.js file to add some Javascript to the formulae.
function Calculate(){
//now extract values in amount, interest rate & months sections in variables
const amount = document.querySelector("#amount").value;
const rate = document.querySelector("#rate").value;
const months = document.querySelector("#months").value;
//calculate IR/month
const interest =(amount*(rate*0.01))/months;
//calculate total payment
const total =((amount/months)+ interest).toFixed(2);
document.querySelector('#total')
.innerHTML= "EMI : (£)" + total;
}
/*
-The code calculates the amount of interest that is charged on a loan.
- It also calculates the total payment for an EMI, which is calculated by multiplying the amount borrowed and number of months in a year.
- The first line of code uses document.querySelector to find all elements with an ID value of "amount" and assigns it to variable "amount".
- Next, the next line finds all elements with an ID value of "rate" and assigns it to variable "rate".
- Lastly, the last line finds all elements with an ID value of "months" and assigns it to variable "months".
-Next, there are two lines that calculate how much interest will be charged on a loan: const interest =(amount*(rate*0.01))/months; const interest = (amount * rate) / months; The first line calculates how much money would be paid per month if you borrow £100 at 5% over 12 months while using 0.01 as your multiplier (i.e., 1%).
-This calculation can also be done by dividing 100 by 12 then multiplying by 0.05 or simply dividing 100 into 5%.
- The second calculation does exactly what its name says-it divides 100 into 12 then
-The code takes the value of the input field and calculates the amount, interest rate and months in variables.
- The code then calculates the monthly interest rate by multiplying the input field with 0.01 to get an amount per month.
It then calculates the total payment using a formula that includes both amounts and interest rates.
-The code uses innerHTML on a div element to calculate the total payment which is displayed in a span element.*/
After saving your files, open the .index.html file using a browser and do your calculations. If you have already borrowed, or maybe you are thinking of borrowing, you can do the calculations yourself.
Check out my (EMI) Loan Calculator here.
So the image below shows that if the loan amount is £2000 borrowed at 30% IR and the payment period is spread over 10 months, then the equated monthly installments will be £260.00.
I hope you guys will follow along. If you get stuck, feel free to ask in the comment section.
Catch you later, developers!
Subscribe to my newsletter
Read articles from Abigirl Muchineripi directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Abigirl Muchineripi
Abigirl Muchineripi
I am embracing my nerdy side by starting to work on the foundations of web development: HTML, CSS, Figma, and JavaScript.