Do you want to create an Interest Calculator using JavaScript? If yes then this tutorial is for you.
Here I will show you step by step how to create a JavaScript interest calculator. I have used html css and javascript to create this simple loan calculator.
Earlier I have shared another tutorial of simple interest calculator. You can watch it if you want. Here I have created the basic structure of javascript emi calculator using html.
JavaScript Interest Calculator
Interest calculators are used for a variety of purposes. Basically, you can easily calculate how much interest an amount can earn within a certain period of time. There are many such websites.
When we use those types of websites we think that they might be very difficult to build. But you can easily create it with basic JavaScript. If you know basic javascript you can make this(JavaScript Interest Calculator) very easily.
See the Pen Interest Calculator Using JavaScript by Ground Tutorial (@groundtutorial) on CodePen.
As you can see in the demo above, this is a basic Interest Calculator design. On the web page I have first created a box that contains three input boxes and a select box.
In the first input box you can input the principal amount. In the second input box you can input the interest rate and the third input box is mainly for time input. The select box here is for selecting the month and year.
Then inside this design(Interest Calculator Using JavaScript) there is a button that will execute the javascript when clicked. This will show all the information in a small display below.
Interest Calculator using HTML CSS JavaScript
Now if you want to make Simple Interest Calculator then follow below tutorial. Here you will get necessary information and step by step tutorial.
First I added the basic information of the JavaScript Interest Calculator using HTML. Then designed it using css. Finally, the Loan Calculator has been implemented by JavaScript.
1. Basic Structure of Interest Calculator
First I created a basic structure on the web page using my own html and css codes. Into this basic structure we will add all the information. Web page background: #6201e2 and height: 100vh.
<div class="container">
</div>* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: #6201e2;
}Now we have to design the basic structure of Interest Calculator. This box has width: 80vw and max-width: 600px and background-color: #ffffff.
.container {
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 80vw;
max-width: 600px;
min-width: 350px;
padding: 60px 30px;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
2. Create input boxes within the Interest Calculator
Now we need to create some input boxes in this Simple Interest Calculator. I have used input function of html for input box. Here I have used type=”number” which will force input of number only.
<div class="input-wrapper">
<div class="wrapper">
<label for="principal">Principal($):</label>
<input type="number" id="principal" value="1000" />
</div>
<div class="wrapper">
<label for="rate">Rate:</label>
<input type="number" id="rate" value="5" />
</div>
</div>
<label for="time">Time:</label>
<div class="time-wrapper">
<input type="number" id="time" value="1" />
<select name="duration" id="duration">
<option value="year">Year</option>
<option value="month">Month</option>
</select>
</div>I used the following css to design the input boxes of this JavaScript interest calculator. Here I have used display: flex so the input boxes will be side by side.
I used border-bottom: 2px solid #585858 to create a border between the boxes and padding: 2px 15px to increase the size.
label {
display: block;
font-size: 22px;
margin-bottom: 10px;
font-weight: 500;
}
input {
margin-bottom: 20px;
border: none;
font-size: 20px;
border-bottom: 2px solid #585858;
color: #585858;
padding: 2px 15px;
}
input:focus {
outline: none;
border-bottom: 2.4px solid #6201e2;
}
.input-wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}
.input-wrapper input {
width: 100%;
}
.time-wrapper input {
width: 60%;
}
select {
width: 35%;
border: 1px solid #585858;
font-size: 20px;
margin-left: 3%;
padding: 8px 0;
border-radius: 5px;
}
3. Create a button within the Interest Calculator
Now we need to create a button using the following html css. If you click on that button, this html Interest Calculator will work. Here I have created Button using button function. Button size depends on padding: 15px 40px. Button background-color: #6201e2 and text color white.
<button id="calculate-btn">Calculate</button>button {
display: block;
background-color: #6201e2;
border: none;
color: #ffffff;
margin: 20px auto 0 auto;
padding: 15px 40px;
font-size: 20px;
border-radius: 5px;
}
4. Create a box to view the calculator's results
Now it’s time to create a result box inside this project(Interest Calculator Using html css JavaScript). When the user clicks on the calculate button, all the information can be found in this result box. We’ll implement all of these result boxes with JavaScript later.
<div id="result"></div>#result {
background-color: #eee2ff;
margin-top: 30px;
color: #585858;
text-align: center;
font-size: 18px;
padding: 20px;
border-radius: 5px;
}
#result div {
margin-bottom: 10px;
}
#result span {
color: #000000;
font-weight: 500;
}
5. Activate the Interest Calculator with JavaScript
What we have done above is just the basic design which is quite simple. But now it’s time to implement the Interest Calculator with JavaScript.
Here I have given the necessary explanation which will help you to know better which javascript lines are used for which purpose.
let calculateBtn = document.getElementById("calculate-btn");
let result = document.getElementById("result");
let calculate = () => {
let p = Number(document.getElementById("principal").value);
let r = Number(document.getElementById("rate").value);
let t = Number(document.getElementById("time").value);
let duration = document.getElementById("duration").value;
let simpleInterest =
duration == "year" ? (p * r * t) / 100 : (p * r * t) / 1200;
let amount = p + simpleInterest;
result.innerHTML = `<div>Principal Amount: <span>${p.toFixed(2)}</span></div>
<div>Total Interest: <span>${simpleInterest.toFixed(2)}</span></div>
<div>Total Amount: <span>${amount.toFixed(2)}</span></div>`;
};
calculateBtn.addEventListener("click", calculate);
window.addEventListener("load", calculate);
Hopefully, from the above tutorial, you have come to know how I created this html Interest Calculator. If there is any problem then you can comment me.
You will find all the code of this project (simple interest calculator using javascript) in the download button below.
You can use this design to make fixed deposit calculator. Here you can input the amount of fixed money. Besides, you can calculate monthly and annual interest here.
I have given the required code for simple interest calculator here. You can easily download those codes using the download button below.
If you want to create a simple interest calculator using JavaScript then this tutorial will definitely help you. Here I have explained the javascript codes so you won’t have any difficulty in understanding.
Earlier I shared another good emi calculator tutorial. But you can also use it as an emi calculator if you want.
There are many tutorials on the internet for making loan calculator. I have given below some examples of them.
https://www.foolishdeveloper.com/2022/01/simple-loan-calculator-using-javascript.html
https://hackernoon.com/build-a-javascript-loan-calculator-with-html-and-css
https://www.geeksforgeeks.org/design-a-loan-calculator-using-javascript/