Build a JavaScript Loan Calculator With HTML & CSS

In this article, you will learn how to create a Loan Calculator using JavaScript, HTML, and CSS. This type of loan calculator will help you to calculate how much you need to pay per month for your loan amount. So the calculator will be able to calculate you very easily.

Many of these calculators I have already made are notable among them BMI calculator using javascript, javascript age calculator. If you know JavaScript you can easily create it.

Loan Calculator using JavaScript

First I created a box on the webpage. I used a heading in that box using the h1 tags. Then there are the three input boxes. The first input box to input the loan amount, the second input box interest rate percent input, and the third input box to input the payment month (how many months it will take to repay the loan).

Watch its live demo to learn how it works. Here I have tried to give a complete explanation of how I made this JavaScript Loan Calculator.

At the end of all, there is a display that will help to show the result. As I said, this loan calculator will be able to calculate how much you have to pay per month with interest. I took the help of HTML CSS and JavaScript to make it. HTML CSS designed it and JavaScript implemented it.

1. Create a box for Loan Calculator

First I designed it using HTML and CSS. I created a box using the following HTML code. The width of this box: 345px, height: 420px and the background color is completely white.

<div id="loancal">

</div>

body{
  background: rgb(8, 144, 110);
  font-family: sans-serif;
}

#loancal {
  width: 345px;
  height: 420px;
  background-color:white;
  color: #fff;
  padding: 10px;
  margin: 100px auto;
}

2. Create a title

Now I have used a heading. This heading has no special significance but it has been used to enhance beauty. Font-size: 30px and the color blue is used to increase the size of the heading.

<h1>Loan Calculator</h1

h1 {
  font-size:30px;
  text-align: center;
  color: rgb(9, 95, 172);
  margin-bottom: 35px;
}

3. Make 3 input boxes

Now I have created some 3 input boxes to input loan-related information. The input boxes are mainly for inputting loan amount, interest rate and total payment month.

The minimum and maximum values are set for each input box. You can input your information between that minimum and maximum value.

<div class="input">

 <p>Loan Amount: $</p>
  <input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()">
 <p>Interest Rate: %</p>
  <input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()">
 <p>Months to Pay: </p>
  <input id="months" type="number" min="1" max="300" value="1" step="1" onchange="computeLoan()">

</div>

.input{
  margin-left: 40px;
  margin-right: 40px;
}
p{
color: rgb(17, 103, 170);
font-size: 17px;
}
input{
  width: 100%;
  height: 33px;
}

4. Create a display to view the results

Now is the time to create a small area. Results can be found in this area. Here text-align: center and color blue are used to place text in the middle.

<h2 id="payment"></h2>

 h2{
   text-align: center;
   color: rgb(6, 111, 139);
   margin-top: 35px;
 }

5. JavaScript code for Loan Calculator

If you know the basic HTML CSS then surely the above designs are not a problem for you to understand. Now is the time to make it fully operational.

If you know basic JavaScript you can easily understand the following JavaScript code. I have put the necessary information on each line here.

function computeLoan(){
//The global constants of some class functions(value) are determined using the following three line codes
const amount = document.querySelector('#amount').value;
const interest_rate = document.querySelector('#interest_rate').value;
const months = document.querySelector('#months').value;

//The interest rate has been calculated.
//The total amount of interest per month has been calculated by the following calculation.
//That calculation is stored in a constant called "interest"
const interest = (amount * (interest_rate * 0.01)) / months;

//The bottom line calculates how much to pay each month.
//Here the total amount is divided by the month (which you will input) and the monthly interest is added to it.
//All these calculations are stored in a constant called "payment".     
let payment = ((amount / months) + interest).toFixed(2); 

//regedit to add a comma after every three digits
//That is, a comma (,) will be added after every three numbers.
//Example 50,000
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 

//With the help of innerHTML, the information stored in the "payment" is displayed on the webpage.
document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}`
}

Hopefully, the tutorial above has helped you to know how to create this JavaScript Loan Calculator. I have already shared how to make a JavaScript BMI calculator.

If you need to download the code to make this loan calculator, you can take the help of the download link below.

For You: Automatic Background Image Slider

First published here