Loan Calculator using JavaScript
Published: 2022-09-11 08:38:29

Hello Guys! In this blog, I'm going to explain to you how to make a loan calculator using javascript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

## **Let's cover HTML Part**
We use HTML to make the skeleton of a website. HTML is a markup language. 

Now let's import the font awesome CDN in our HTML `<head>` tag. fontawesome is a library that is used for icons in a website.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
```


Now let's import the fonts using Google Fonts API. Below is the code for `Poppins` Font. Paste the below code in `<head>` tag.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
```

Now let's design the container in our `<body>` tag. In the below HTML code, we have created a container that contains the `<h1>` tag for the heading. Then form-input div which has inputs that are loan amount, percentage, interest rate, and months of repayment.

Next we have calculate button which have onclick attribute with `calculateLoan()` function

```html
<div class="container">
    <h1>Loan Calculator</h1>
    <div class="form-input">
        <button class="input-icon"><i class="fas fa-dollar-sign"></i></button>
        <input type="number" class="input" id="amount" placeholder="Loan Amount">
    </div>
    <div class="form-input">
        <button class="input-icon"><i class="fas fa-percentage"></i></button>
        <input type="number" class="input" id="interest" placeholder="Interest">
    </div>
    <div class="form-input">
        <button class="input-icon"><i class="fas fa-calendar"></i></button>
        <input type="number" class="input" id="months" placeholder="Months to repay">
    </div>

    <button class="calculateBtn" onclick="calculateLoan()">Calculate</button>

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


## **Here is the final HTML code**

```html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Loan Calculator - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <h1>Loan Calculator</h1>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-dollar-sign"></i></button>
            <input type="number" class="input" id="amount" placeholder="Loan Amount">
        </div>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-percentage"></i></button>
            <input type="number" class="input" id="interest" placeholder="Interest">
        </div>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-calendar"></i></button>
            <input type="number" class="input" id="months" placeholder="Months to repay">
        </div>

        <button class="calculateBtn" onclick="calculateLoan()">Calculate</button>

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

</html>
```

### **Output Till Now**

![HTML Output of loan calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iabruat424qm83u8iro.png)


## **Let's understand CSS part**
In the below CSS code. 
1. We declare a * selectors for the font Poppins that we have imported in our head tag.
2. Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
3. Next we have container with border deepskyblue and border-radius for curve edges to improve UI.

```css
* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid deepskyblue;
    padding: 40px;
    border-radius: 20px;
    width: 30rem;
}

.form-input {
    border: 2px solid deepskyblue;
    width: 14rem;
    height: 2rem;
    background: white;
    border-radius: 5px;
    margin: 5px 0;
}

.input {
    height: 100%;
    width: 80%;
    border: none;
    outline: none;
    padding: 0 10px;
}

.input-icon {
    width: 15%;
    height: 100%;
    border: none;
    cursor: pointer;
}

.calculateBtn {
    height: 3rem;
    width: 8rem;
    border: 2px solid deepskyblue;
    background: deepskyblue;
    color: white;
    font-size: 16px;
    border-radius: 7px;
    padding: 8px;
    margin-top: 10px;
    cursor: pointer;
} 
```

### **Output Till Now**

![CSS Output of loan calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwwe95ttosq1hsbq7t46.png)

## **Finally a JavaScript part**

In the below javascript code, we have `calculateLoan()` arrow function.
In `calculateLoan()` function we have declared 3 variables that are amount, interest, and months and then grab their respective values from the input. Next, we have monthlyPayment, totalInterest and totalPayment variable with a formula to calculate. Next, we set the result using DOM Manipulation.

```javascript
const calculateLoan = () => {
let amount = document.getElementById("amount").value;
let interest = document.getElementById("interest").value;
let months = document.getElementById("months").value;

let monthlyPayment = ((amount / months) + interest);
let totalInterest = (amount * (interest * 0.01)) / months;
let totalPayment = parseFloat(amount) + parseFloat(totalInterest);

document.getElementById("result").innerHTML = `
                <h2>Results : </h2>
                <h4>Total payment : ${parseFloat(totalPayment).toFixed(2)}</h4> 
                <h4>Monthly Payment :  ${parseFloat(monthlyPayment).toFixed(2)}</h4>
                <h4>Total Interest : ${parseFloat(totalInterest).toFixed(2)}</h4>`;
}
```