DEV Community

Cover image for JavaScript Loan Calculator With HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on

JavaScript Loan Calculator With HTML & CSS

In this article you will learn how to create 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.

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode

Create a box for Loan Calculator

2. Create a title

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

<h1>Loan Calculator</h1
Enter fullscreen mode Exit fullscreen mode
h1 {
  font-size:30px;
  text-align: center;
  color: rgb(9, 95, 172);
  margin-bottom: 35px;
}
Enter fullscreen mode Exit fullscreen mode

Create a title

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>
Enter fullscreen mode Exit fullscreen mode
.input{
  margin-left: 40px;
  margin-right: 40px;
}
p{
color: rgb(17, 103, 170);
font-size: 17px;
}
input{
  width: 100%;
  height: 33px;
}
Enter fullscreen mode Exit fullscreen mode

Make 3 input boxes

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>
Enter fullscreen mode Exit fullscreen mode
 h2{
   text-align: center;
   color: rgb(6, 111, 139);
   margin-top: 35px;
 }
Enter fullscreen mode Exit fullscreen mode

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}`
}
Enter fullscreen mode Exit fullscreen mode

JavaScript Loan Calculator With HTML & CSS
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.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Discussion (1)

Collapse
solbypan4 profile image
Solbypan4

I am very interested in this mortgage calculator. I don't know if I will be able to create it, but I will try very hard. My wife and I dream of buying our own home, and a mortgage is the only option to make that happen. We want to consult with someone about mortgages because we don't know our very well ourselves.

Last week we told friends about our idea and the recommended Mortgage Advice Coventry. They bought a mortgage two years ago and were happy with it through this mortgage broker.