codemediaweb.com

Code Media

hire me

EMI Calculator Using HTML, CSS and JavaScript

by
JavaScript EMI Calculator

If you want to make a javascript EMI calculator then this tutorial is for you. Here I will discuss with you how to create a loan calculator using JavaScript.

There are different types of interest rate calculator or emi calculator. However, the design that I have created here is absolutely simple. Basically, it will be suitable for you if you are a beginner.

In this tutorial, you will learn about JavaScript and how to create an EMI calculator JavaScript. Here I will discuss everything with you. What could be the problem and how to make it easier.

JavaScript EMI Calculator

There are many types of tutorials on the internet for creating emi calculator HTML. However, in this article, you will find a lot of advanced and extra information. 

The loan calculator will basically help you to know how much you have to pay per month including the interest of any loan amount.

For example, you have taken a loan of 1000 rupees or you are buying a product which costs 1000 rupees. There is 5% interest per year. 

Now you want to return that money in 6 months. Then you can calculate how much money you have to pay per month with this interest rate calculator.

If you are having difficulty understanding what I am saying then be sure to follow the preview below.

See the Pen
EMI Calculator by Shantanu Jana (@shantanu-jana)
on CodePen.

Hope you liked the demo above and that you know how this JavaScript Loan Calculator works. With the help of HTML, I created the input boxes and added some basic text here. 

I have designed all the information by CSS. The most important thing here is JavaScript. There is a manual formula for calculating emi that EMI calculator formula I have added by JavaScript.

How to Create a EMI Calculator with JavaScript

Of course to make this simple EMI calculator you need to have some idea about HTML CSS and JavaScript. To make this JavaScript loan calculator you need to follow a few steps below.

Make a box on the webpage

Now I have created a basic area of ​​this emi calculator. This means that a box has been created at the top of the webpage in which all the input boxes and information of this loan calculator can be seen. The width of this box: 345px, height: 420px and background color white has been used.

<div id=”loancal”>
</div>
body {
  background: #ffffff;
  font-family: sans-serif;
}
#loancal {
  width: 345px;
  height: 420px;
  background-color: white;
  color: #fff;
  padding: 10px;
  margin: 100px auto;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
Make a box on the webpage

Add headings to EMI Calculator

Now I have added a heading using HTML’s H1 tag.

<h1>Loan Calculator</h1>
h1 {
  font-size: 30px;
  text-align: center;
  color: #f3558e;
  margin-bottom: 35px;
}
Add headings to EMI Calculator

3 input boxes of EMI Calculator

I told you first there are three input boxes here to input the loan amount, interest rate, and month number. A minimum and maximum value are set in each input box. 

That means you have to input the information in that value. You can change these minimum and maximum values ​​as per your requirement.

<div class=”input”>
  <p>Loan Amount: ₹</p>
  <input id=”amount” type=”number” min=”1″ max=”5000000″>
  <p>Interest Rate: %</p>
  <input id=”interest_rate” min=”0″ max=”100″ value=”” step=”.1″>
  <p>Months to Pay: </p>
  <input id=”months” type=”number” min=”1″ max=”300″ value=”” step=”1″>
</div>
.input {
  margin-left: 40px;
  margin-right: 40px;
}
p {
  color: #581b98;
  font-size: 17px;
  font-weight: 600;
}
input {
  width: 100%;
  height: 33px;
}
EMI Calculator Using HTML, CSS

Submit button to calculate the loan

A button has been created at the end of all that will help to calculate. Button max-width: 200px and height: 35px are used.

<div class=”btn”>
  <button id=”btn” onclick=”computeLoan()”>Calculate</button>
</div>
.btn {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
button {
  width: 100%;
  max-width: 200px;
  height: 35px;
  border-radius: 5px;
  outline: none;
  border: none;
  background-color: #303a52;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
Simple Loan Calculator using JavaScript

Result box of JavaScript EMI Calculator

Now I have created a result box in which the amount of EMI can be seen. When you have input all the information, you will click on the Calculate button. The EMI amount can be seen in this result area.

<h2 id=”payment”></h2>
h2 {
  text-align: center;
  color: rgb(6, 111, 139);
  margin-top: 35px;
}
JavaScript EMI Calculator Source Code

JavaScript code for EMI Calculator

Now I have used some JavaScript to activate this EMI calculator.

function computeLoan() {
  const calculete_btn = document.querySelector(“#btn”);
  const amount = document.querySelector(“#amount”).value;
  const interest_rate = document.querySelector(“#interest_rate”).value;
  const months = document.querySelector(“#months”).value;
  const interest = (amount * (interest_rate * 0.01)) / months;
  let payment = (amount / months + interest).toFixed(2);
  payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
  document.querySelector(
    “#payment”
  ).innerHTML = `Monthly Payment = ₹${payment}`;
}

I hope you did not have any difficulty understanding the above tutorial. The code used to make this EMI Calculator is very simple.

JavaScript EMI Calculator Source Code

I have shown all the above codes step-by-step so many beginners will not be able to combine those codes together. For them, I have given the following section. Here I have attached all the codes together. 

You create an HTML file and copy all the code below and add it to your HTML file. Since I have combined all the codes of this JavaScript loan calculator together. So there is no need to create separate CSS and JavaScript files.

See the Pen
EMI Calculator by Shantanu Jana (@shantanu-jana)
on CodePen.

Javascript EMI calculator source code is in the download button below. If you can’t copy the code above, use the button below.

Leave a comment