## DEV Community

Piyush | Coding Torque

Posted on • Originally published at codingtorque.com

# Loan Calculator using JavaScript

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.

``````<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
``````

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

``````<link rel="preconnect" href="https://fonts.googleapis.com">
``````

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

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

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

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

<!-- Font Awesome Icons  -->
crossorigin="anonymous" />

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

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

## 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.
``````* {
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;
width: 30rem;
}

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

.input {
height: 100%;
width: 80%;
border: none;
outline: none;
}

.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;
margin-top: 10px;
cursor: pointer;
}
``````

## 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.

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