JavaScript Loan Calculator With HTML & CSS
Tags: html, javascript, webdev, beginners
Published: 2022-01-09 15:27:48

In this article you will learn how to create [Loan Calculator using JavaScript](https://www.foolishdeveloper.com/2022/01/simple-loan-calculator-using-javascript.html), 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](https://www.foolishdeveloper.com/2021/10/bmi-calculator-using-javascript.html), [javascript age calculator](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html). 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**](https://www.foolishdeveloper.com/2022/01/simple-loan-calculator-using-javascript.html) 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.

```html
<div id="loancal">

</div>
```
```css
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;
}
```

![Create a box for Loan Calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slvpnu6rji34po04ambe.jpg)
### 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.

```html
<h1>Loan Calculator</h1
```

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

![Create a title](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8ap6bj8pdupq3vpxg22.jpg)
### 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.

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

![Make 3 input boxes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwcro8lb8k81t1s1cemg.jpg)

### 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.
```html
<h2 id="payment"></h2>
```
```css
 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](https://www.foolishdeveloper.com/search/label/html) 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](https://www.foolishdeveloper.com/search/label/javascript) you can easily understand the following JavaScript code. I have put the necessary information on each line here.

```javascript
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}`
}
```

![JavaScript Loan Calculator With HTML & CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1csbvix2q4o11xfu22c.jpg)
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](https://www.foolishdeveloper.com/2021/10/bmi-calculator-using-javascript.html). 


If you need to [download the code](https://www.foolishdeveloper.com/2022/01/simple-loan-calculator-using-javascript.html) 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/