Loan Calculator using JavaScript
Hello Guys! In this blog, I'm going to explain to you how to create Loan calculator using JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Let's cover the HTML part
HTML is a markup language. We use HTML to make the skeleton of a website.
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.
<!-- 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" />Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag.
<!-- 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">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="card">
<div class="sliders">
<label for="red">Red</label>
<input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="red">
<label for="green">Green</label>
<input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="green">
<label for="blue">Blue</label>
<input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="blue">
<label for="alpha">Aplha</label>
<input type="range" min="0.1" max="1.0" step="0.1" value="1" oninput="generateRGBA()" id="alpha">
</div>
<div class="output-box">
<div class="output" id="output">rgba(0,0,0,1)</div>
<div class="copy-btn" onclick="copy()"><i class="fas fa-copy"></i></div>
</div>
</div>Here is the Final HTML Code
<!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
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
- 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;
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
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>`;
}