Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners
Tags: javascript, webdev, css, html
Published: 2022-05-03 17:31:48

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 . 

![Simple interest calculator in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axfqrlt78c24qjmoaj1n.gif)

**Source File Link [Here](https://ziontutorial.com/how-to-make-simple-interest-calculator-in-javascript-html-simple-interest-calculator-for-beginners/)**

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 . 

**⭐ Note Must Download the source Link From [Here](https://ziontutorial.com/how-to-make-simple-interest-calculator-in-javascript-html-simple-interest-calculator-for-beginners/)**
```
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple interest calculator</title>
    <link rel="stylesheet" href="style.css">
</head>

<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');
 
 
*{
  padding: 0;
  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-radius: 10px;
  border: 3px solid rgb(0, 0, 0);
}
 
.container h2 { 
  padding-top: 15px;
  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-radius: 5px;
  border: 1px solid black;
  outline: none;
  font-size: 20px;
  padding: 24px;
}
 
p {
  color: #3E00AC;
  font-size: 17px;
  padding: 10px;
}

#interest {
  font-size: 20px;
  padding-left: 1rem;
}
#plus {
  font-size: 20px;
  padding-left: 1rem;
}
 
 
 
 
/* CSS */
.button-56 { width: 400px;
  height: 200px;
  align-items: center;
  background-color: #adffc8;
  border: 2px solid #111;
  border-radius: 8px;
  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%;
  padding: 85rem 25rem;
  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;
  border-radius: 8px;
  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 {
    padding: 0 40px;
  }
}
```


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*/
     
    btn.addEventListener("click", () => {
        /*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>

```


![ziontutorial JavaScript mini project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w73b0o6g3z6undakxter.gif)

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 .


[Downloading Files](https://ziontutorial.com/how-to-make-simple-interest-calculator-in-javascript-html-simple-interest-calculator-for-beginners/)