How to design a Loan EMI Calculator using HTML, CSS and JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn about the design and working of a loan calculator using JavaScript. This calculator will simply tell us about our monthly EMI based on the loan amount, interest rate, and month.

We will make the UI using HTML and will apply the styling using internal CSS then we will apply the functionality to calculate EMI using JavaScript.

HTML

Firstly, we will create a div block that will have three input boxes.

All the boxes will be for the loan amount, rate, and time respectively.

Then a button and an output field will be there for EMI.

Let’s have look at the full design code.


<!DOCTYPE html>
<html>
<head>
   <title>Loan calculator-KalyanMishra (TutorialsPoint)</title>
</head>
<body>
   <div class="Loan_calcualtor">
      <h1>Loan Calculator </h1>
      <p>Loan amount: $
         <input type="number" id="amount" placeholder="Enter amount..">
      </p>
      <p>Rate (Interest): %
         <input step=".1" id="rate" placeholder="Enter rate..">
      </p>
      <p>Months (Time):
         <input type="number" id="time" placeholder="Enter time..">
      </p>
      <input type="button" value="Calculate" id="calculate_op">
      <p>Total EMI: $
         <span style="font-weight: 20px; color: white;" id="output"></span>
      </p>
   </div>
</body>
</html>

CSS

We add the following CSS for better UI.

<style>
   .Loan_calcualtor{
      width: 400px;
      height: 550px;
      background-color: black;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      padding: 20px 0px 0px 100px;
      border-radius: 10px;
      color: white;
   }
   p{
      color: white;
      font-size: 25px;
      font-family: sans-serif;
   }
   h1{
      color: royalblue;
   }
   input{
      height: 33px;
      width: 70%;
      background-color: green;
      font-size: 20px;
      color: white;
      padding: 7px;
   }
   #calculate_op{
      color: white;
      font-size: 20px;
      width: 100px;
      align-content: center;
      margin-left:100px;
      cursor: pointer;
   }
   </style>

After adding the CSS to the HTML part, the output looks like the below.

Adding JavaScript Logic

Now it’s time to make our input code work using JavaScript.

Using getElementById ('amount').value we will get the entered item value by user from input box.

We will first calculate the amount of interest per month using the equation.

interest = (amount * (rate * 0.01)) / time;

Then how much total EMI amount do we have to pay per month using the equation?

emi = ((amount / time) + interest).toFixed(2);

so, our function code will be

function calculate(){
   amount=document.getElementById('amount').value
   rate=document.getElementById('rate').value
   time=document.getElementById('time').value
   const interest = (amount * (rate * 0.01)) / time;
   let emi = ((amount / time) + interest).toFixed(2);
   emi = emi.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   document.getElementById("output").innerHTML=emi
}

Example

Complete Program to Design Loan Calculator.

Let’s combine JavaScript logic and CSS to the HTML part to complete our task to design the loan calculator.


<!DOCTYPE html>
<html>
<head>
   <title>Loan calculator-KalyanMishra (TutorialsPoint)</title>
   <style>
      .Loan_calcualtor{
         width: 400px;
         height: 550px;
         background-color: black;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
         padding: 20px 0px 0px 100px;
         border-radius: 10px;
         color: white;
      }
      p{
         color: white;
         font-size: 25px;
         font-family: sans-serif;
      }
      h1{
         color: royalblue;
      }
      input{
         height: 33px;
         width: 70%;
         background-color: green;
         font-size: 20px;
         color: white;
         padding: 7px;
      }
      #calculate_op{
         color: white;
         font-size: 20px;
         width: 100px;
         align-content: center;
         margin-left:100px;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <div class="Loan_calcualtor">
      <h1>Loan Calculator </h1>
      <p>Loan amount: $
         <input type="number" id="amount" placeholder="Enter amount..">
      </p>
      <p>Rate (Interest): %
         <input step=".1" id="rate" placeholder="Enter rate..">
      </p>
      <p>Months (Time):
         <input type="number" id="time" placeholder="Enter time..">
      </p>
         <input type="button" value="Calculate" id="calculate_op" onclick="calculate()">
      <p>Total EMI: $
         <span style="font-weight: 20px; color: white;" id="output"></span>
      </p>
   </div>
   <script>
      function calculate(){
         amount=document.getElementById('amount').value
         rate=document.getElementById('rate').value
         time=document.getElementById('time').value
         const interest = (amount * (rate * 0.01)) / time;
         let emi = ((amount / time) + interest).toFixed(2);
         emi = emi.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
         document.getElementById("output").innerHTML=emi
      }
   </script>
</body>
</html>