How To Build Interest Calculator Using JavaScript

How To Build Interest Calculator Using JavaScript

Hey Guys, In Today’s Blog We are going to see How to create a Simple Interest Calculator Using  JAVASCRIPT. For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

How To Build Interest Calculator Using JavaScript

Now The Project is going to create and for that, we are first adding an HTML Code.

HTML CODE:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interest Calculator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script type="text/javascript">
 

</script>
</head>
    
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Simple interest Calculator</h1>
                
            </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form>
                        <div class="form-group">
                            <label class="form-group">Principal</label>
                            <input class="form-control" type="text" id="principle">
                        </div>
                        <div class="form-group">
                            <label class="form-group">Years</label>
                            <input class="form-control" type="text" id="years">
                        </div>
                        <div class="form-group">
                            <label class="form-group">Rate of interest</label>
                            <input class="form-control" type="text" id="rate">
                        </div>
                        <button type="button" class="btn btn-primary" onClick="calculate()">Calculate</button>
                        
                    </form>
                
                </div>
                     
            
            </div>
            <div class="row">
            
                <div class="col-md-12">
                    <h1 id="res">
lt;/h1> </div> </div> </div> </body> </html>
Here We are Used HTML with bootstrap by simply adding the bootstrap CDN link from source and paste it inside of head tag. Now further line by line we are adding contents that will change its attribute and styling.
Weather App Using Html,Css And Javascript (Source Code )
First We are adding some div class with specific names and adding an head inside of it. Then A similar div class is created and inside a label class were added with input class that contains an separate ID.
Like This We are creating this for another two times one for years and another for rate of interest and lastly a button is added to calculate interest.
Further more, an h1 with id is added for showing up the calculated result which would be done by Java Script.
JAVASCRIPT CODE:
function calculate(){
    var p = 0;
    var y = 0;
    var r = 0;
    var SI= 0;
    
    p = parseInt(document.getElementById("principle").value);
    y = parseInt(document.getElementById("years").value);
    r = parseInt(document.getElementById("rate").value);
    
    SI = (p*y*r)/100;
    document.getElementById("res").innerHTML=SI;
    
}
Here first we create an function with class name calculate() and inside of it we are assigning principal , year , rate of interest and simple interest to zero.
Then with three separate variable names  we are calling out the principal , years and rate using java script get element property.
After that , we are using formula and storing the values inside SI variable and lastly by getting the element that is created for displaying result by using inner HTML method.
5+ HTML CSS Projects With Source Code
So that’s of for JavaScript and the project is now completed successfully. Now we can make a preview on the given Output.
  
 
FINAL OUTPUT Of Interest Calculator Using JavaScript:
Now We have Successfully created our Simple Interest Calculator Using HTML & JAVASCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
   
If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
REFER CODE- Thompson
  
 
WRITTEN BY- Ragunathan




   

Tags: , 
Leave a Reply