Make a Loan Calculator in JavaScript (Code + Demo)

Make a Loan Calculator in JavaScript

Do you want to create a javascript loan calculator?

If your answer is yes, then this article will help you. In this tutorial, I have shown you how to create a loan calculator using JavaScript. Using JavaScript Loan Calculator you can calculate various loan-related information. 


Here you can input the amount, interest rate, and time. If you input that information, you will be able to know how much interest will have to be paid every year and what will be the total amount.

This type of loan calculator we use in different places. We use calculators to calculate loan-related information which is cumbersome and time-consuming. In that case, you can use this type of JavaScript EMI calculator.

Loan Calculator Javascript

It's much easier to create if you know HTML, CSS, and javascript. No problem if you are a beginner. Here you will find complete step-by-step tutorials.

The following preview will help you to understand how this JavaScript Loan Calculator works.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


First I designed the webpage. Then I made a box. A heading has been used in that box. Then there is space to input the amount and interest rate. 

In that input box, you can input information related to your loan. Then time is in place to input. In that box, you can input time year, and month in two ways.

Then there is a button. Clicking on it will calculate the information you have input. Everyone has a display at the end. When you click on the button, the calculation can be seen in that display.

How to Create a JavaScript Loan Calculator

Here are 3 options for making this javascript loan calculator. First I shared a tutorial that lets you know how it works. 

Then you will get the source code which you can copy and make this JavaScript EMI calculator. Then there is a button to download the source code.

1. Make a box on the webpage

First I designed the webpage and made a box. This box will contain all the information. Box width: 80vw and used background-color: white.


<div class="container">
  
</div>


* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
height: 100vh;
background: #2ba6e2;
}


.container {
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 80vw;
max-width: 450px;
min-width: 350px;
padding: 60px 30px;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

Make a box on the webpage

2. Add a heading in Loan Calculator

Now I have added a heading. The color: white and background blue of this heading has been used. Margin: -60px -30px 50px -30px is used to adjust the text.


<div class="heading">JavaScript Loan Calculator</div>


.heading{
  background: rgb(18, 101, 201);
  color: white;
  padding: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-size: 22px;
  margin: -60px -30px 50px -30px;
}

Add a heading in Loan Calculator

3. Amount and Interest rate input box

Now a place has been created to input the amount and interest rate. The input function of HTML is used to create the input box. A label is used with each input box.


<div class="input-wrapper">
  <div class="wrapper">
    <label for="principal">Amount($):</label>
    <input type="number" id="principal" value="1000" />
  </div>
  <div class="wrapper">
    <label for="rate">Interest(%):</label>
    <input type="number" id="rate" value="5" />
  </div>
</div>


.input-wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}

.input-wrapper input {
width: 90%;
}


label {
display: block;
font-size: 20px;
margin-bottom: 10px;
}

input {
margin-bottom: 20px;
border: none;
font-size: 20px;
border: 1.3px solid #585858;
color: #585858;
padding: 5px 15px;
}

input:focus {
outline: none;
border-bottom: 2.4px solid #01e26e;
}

Amount and Interest rate input box

4. Loan's time select box

Now a place to input time and a select box have been created. You can select the month and year with the help of the select box here.


<label for="time">Time:</label>
<div class="time-wrapper">
  <input type="number" id="time" value="1" />
  <select name="duration" id="duration">
     <option value="year">Year</option>
     <option value="month">Month</option>
  </select>
</div>


.time-wrapper input {
width: 60%;
}


select {
width: 35%;
border: 2px solid #0b6bdf;
font-size: 20px;
margin-left: 3%;
padding: 8px 0;
border-radius: 2px;
}

Loan's time select box

5. Loan Calculator button

Now a button has been created. This button will help you to calculate all the information you have entered together. Button size depends on padding: 15px 40px.


<button id="calculate-btn">Calculate</button>


button {
display: block;
background-color: #0b83be;
border: none;
color: #ffffff;
margin: 20px auto 0 auto;
padding: 15px 40px;
font-size: 20px;
border-radius: 5px;
}


Loan Calculator button

6. Display of EMI calculator

Now a display has been created in which the calculation of the Loan Calculator can be seen. The size of the box will depend on the amount of content. 

Display: none is used here, which means this box cannot be viewed under normal conditions.


 <div id="result"></div>


#result {
margin-top: 30px;
color: #585858;
text-align: center;
font-size: 18px;
padding: 20px;
display: none;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,139,253,0.35);
}

#result div {
margin-bottom: 10px;
}

#result span {
color: #000000;
font-weight: 500;
}

Now I have arranged to see the result box. I have instructed her that when you click on the Calculate button, the display will be visible. For this, display: block has been used here.


button:focus ~ #result{
  display: block;
}


Display of EMI calculator

7. Activate Loan Calculator with JavaScript

The above javascript loan calculator has been fully designed. Now you need to implement the loan calculator using JavaScript. There is very little js used here which you can easily understand.


//The calculate button and display, its id is set to constant
let calculateBtn = document.getElementById("calculate-btn");
let result = document.getElementById("result");


let calculate = () => {
//The value of the input box has been collected and stored in different constants
   let p = Number(document.getElementById("principal").value);
   let r = Number(document.getElementById("rate").value);
   let t = Number(document.getElementById("time").value);
   let duration = document.getElementById("duration").value;
//Interest calculation formula
   let simpleInterest =
      duration == "year" ? (p * r * t) / 100 : (p * r * t) / 1200;
//Total amount with interest
   let amount = p + simpleInterest;
//'innerHTML' is used to display all calculations in the result box.
   result.innerHTML = 
`<div>Principal Amount: <span>$${p.toFixed(2)}</span></div>
     <div>Total Interest: <span>$${simpleInterest.toFixed(2)}</span></div>
      <div>Total Amount: <span>$${amount.toFixed(2)}</span></div>`;
};



//All the above calculations are stored in 'calculate'.
//Now the button has been activated
//Instructed here, clicking on the button will activate the 'calculate' function
calculateBtn.addEventListener("click", calculate);
//To calculate default input as window loads
window.addEventListener("load", calculate);


Loan Calculator with JavaScript

JavaScript Loan Calculator [Source Code]

There are many beginners who only want to take the source code of loan calculator javascript. For them, I have given the following section. In this section, you will find all the source codes that are attached together. 

You do not need to create multiple files for this. Just create an HTML file and copy the following code and add it to the HTML file.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


However, if you want, you can download the code using the button below. I hope you have learned from this tutorial how I created this loan calculator using javascript. 

If there is any problem then you can definitely let me know by commenting. Please comment on how you like this JavaScript EMI calculator.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha...
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

How To Limit Character In Input Field using JavaScript

Image
Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter. Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML. Limit Character In Input Field However, even if you use the maxlength attribute , you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear. Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . As you can see above, this is a simple Javascript Limit Characters . A box has been created on the webpage. An input box has been created i...
Read more