ziontutorial

Posted on

# Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners

In this article I'm going to show you how I did it. 😃
in this post specially we are going to take a look on how to achieve the simple interest calculator project using html css and javascript .The final result we are going to build in this tutorial is look like this .

The source file of this small project you can download from the above link easily. Mainly in this project you can learn about these concepts which is given below .

• You will learn about how to manipulate dom .
• Formula calculation through it .
• Accept the input value to a variable and much more .

The HTML
First we need the html markup . Where aour skeleton of the calculator will be made . so here i have m-mention some html code . Also i have attached the separate style sheet link to it .

``````<!DOCTYPE html>
<html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple interest calculator</title>

<body>

<div class="container">
<h2>Simple Interest</h2>
<input type="number" id="principal" placeholder="Principal">
<input type="number" id="rate" placeholder="Rate Of Interest">
<input type="number" id="time"placeholder="Time in years">
<div class="result">
<p>Interest: <span id="interest"></span><br></p>
<p>Total Interest: <span id="plus"></span></p>
</div>
<button id="btn" class="button-56" role="button">Submit</button>
</div>

</body>

</html>
``````

Note: You can customize it as you wish, I just added some styling to make it look better.

The CSS
Here you can style this calculator as you want but in case i have applied or making normal styling to it . make a file seprate file name style.css where you have to write your styling for it .

``````@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
margin: 0;
box-sizing: border-box;
}

body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3E00AC;
font-family: 'Poppins', sans-serif;
}

.container{
width: 550px;
height: 750px;
display: grid;
place-items: center;
background: #edf1f4;
border: 3px solid rgb(0, 0, 0);
}

.container h2 {
font-family: 'Poppins', sans-serif;
font-weight: 800;
color: #464646;
}

.container span{
font-weight: 700;
}

.container .result{
color: #9E9E9E;
width: 440px;
}

.container input{
width: 440px;
height: 80px;
background: #edf1f4;
inset: -5px -5px 5px #fff;
border: 1px solid black;
outline: none;
font-size: 20px;
}

p {
color: #3E00AC;
font-size: 17px;
}

#interest {
font-size: 20px;
}
#plus {
font-size: 20px;
}

/* CSS */
.button-56 { width: 400px;
height: 200px;
align-items: center;
border: 2px solid #111;
box-sizing: border-box;
color: rgb(26, 26, 26);
cursor: pointer;
display: flex;
font-family: Inter,sans-serif;
font-size: 16px;
height: 68px;
justify-content: center;
line-height: 24px;
max-width: 100%;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin-bottom: 1rem;
}

.button-56:after {
background-color: #111;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}

.button-56:hover:after {
transform: translate(0, 0);
}

.button-56:active {
background-color: #ffdeda;
outline: 0;
}

.button-56:hover {
outline: 0;
}

@media (min-width: 768px) {
.button-56 {
}
}
``````

We have Sucessfully Done our css and html part now lets start our fun part which is javascript . Lets understand how our logic works for this simple interest calculator .
Hope You understand the above part of this calculator . Lets start now our JavaScript.

The Javascript

``````!--Script-->
<script>

/*Simple Interest Formula =
p*r*t/100*/

/*Get input values to the variables */
let p = parseInt(document.getElementById('principal').value);
let r = document.getElementById('rate').value;
let t = document.getElementById('time').value;
let btn = document.getElementById('btn');

var interest = (p*r*t)/100;

document.getElementById('interest').innerHTML = interest;

var plusInterest = p + interest;
document.getElementById('plus').innerHTML = plusInterest;

})

</script>

``````

Congratulations! You’ve created a fully functional and styled app. Hopefully, you’ve learned a something new during the whole process! Do comment in the comment box for any suggestion and query .