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

#javascript #webdev #css #html

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 .

Source File Link Here

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

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

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