Compound Interest Calculator Using JavaScript

Compound Interest Calculator Using JavaScript

by

Compound Interest Calculator Using JavaScript

Compound Interest Calculator Using JavaScript. In this Article i will step through on how to create this !

In order to create this Compound Interest rate calculator. The First thing we need to do is to build the HTML Form. Subsequently we need to assign id and tag value to our element.After that we need to input the Formulae which calculate the compound interest and then finally return the Output via inline HTML .Check out the Compound interest formulae over here

In the JavaScript, the program will grab the element and do the logic processing. there are a few important function will be use to grab value from the text box in the form.refer the below for details

Below Shows the Form that we are going to create using Javascript

 

Compound Interest Calculator

Enter your Principal Amount :

Enter the interest Rate :

Enter the Interest paid in " n" amount of year :

Number of Times interest paid per year? :

 

Let Step in the Code below to create a Compound Interest Calculator Using JavaScript

    1. The first thing we need to do is to create a standard HTML file with Doctype, header  and body.
    2. After we have created our basic HTML Structure , Create a Form using the Form tag.
    3. In the Form tag create 4 paragraph tag , and inside the paragraph tag create the Input type=”text” to allow the user to input the value
    4. There are 4 input tag that we need to create in this example, the “Principal Amount , Interest rate, year and number of time paid”
    5. Create 4 Separate ID for all these input type tag “getPrincipalValue getInterestRate getYear getTiming” we will refer to this tag in JavaScript to grab the value input by the User
    6. Give all the Text Box a place holder value when no text is being enter by the user “Principal/ Interest Rate/ year/number of time paid”
    7. Now lets code our calculate button . So when the button is being click onclick=”compoundInterest(this.principal , this.interest , this.nyear , this.ntime); it will trigger the compoundInetrest() method
    8. We are almost done with our HTML , the final step is to set our inline HTML Paragraph tag. At here the JavaScript will output the result from the Calculation
    9. Create 4 id for the Tags “outputPrincipal/outputInterest/outputYear/outputtime/compounded”
    10. Now lets create our method in JavaScript
    11. Use this document.getElementById(“getPrincipalValue”).value; to grab all 4 of the value input by the user
    12. Pass all value collected into the Compund interest formulae and assign the result to var resultCompound
    13. Print out the result using document.getElementById(“outputPrincipal”).innerHTML by grabing the paragraph element ID that we already assign in earlier steps
    14. Well Congratualtion, we are done here .!

<!DOCTYPE html>
<html>
<head>

</head>
  
    <body>
          <form>
                    <div>
                        <h2>Compound Interest Calculator</h2>
                        <P style="color:blue;"><strong>Enter your Principal Amount :</strong><input type="text" id="getPrincipalValue" name="prncipal"  placeholder="Principal" ></P>
                        <P style="color:blue;"><strong>Enter the interest Rate :</strong><input type="text" id="getInterestRate" name="interest"  placeholder="Interest Rate" ></P>
                        <P style="color:blue;"><strong>Enter the Interest paid in " n" amount of  year :</strong> <input type="text" id="getYear" name="year"  placeholder="year" ></P>
                        <P style="color:blue;"><strong>Number of Times interest paid per year? :</strong><input type="text" id="getTiming" name="timing"  placeholder="number of time paid" ></P>
                        <P>
                        <input type="button" value="Calculate" id="" onclick="compoundInterest(this.principal , this.interest , this.nyear , this.ntime);"/></P>
               </div>
    
                </form>
        
     
         <p id="outputPrincipal"> </p>
         <p id="outputInterest"> </p>
         <p id="outputYear"> </p>
         <p id="outputtime"> </p>
         <p id="compounded"> </p>
        
         <script type="text/javascript">
                   function compoundInterest(principal, interest ,nyear,ntime ) {
                
                            principal = document.getElementById("getPrincipalValue").value;
                            interest = document.getElementById("getInterestRate").value;
                            nyear = document.getElementById("getYear").value;
                            ntime = document.getElementById("getTiming").value;               
                            

                          var resultCompound  = ( principal* Math.pow((1 + (interest/(ntime*100))), (ntime*nyear)));
               
                            document.getElementById("outputPrincipal").innerHTML = "Principal Enter is " + principal;
                            document.getElementById("outputInterest").innerHTML = "Interest Enter is " + interest;
                            document.getElementById("outputInterest").innerHTML = "Number of Years Enter " + nyear;
                            document.getElementById("outputtime").innerHTML = "Number of time interestpaid per year " + ntime;
                            document.getElementById("compounded").innerHTML = "Interest Plus Principal " + resultCompound;
                   }
                
           </script>
         
    </body>
   
 
</html>

Check out JavaScript equivalent cin here

Leave a Comment

eleven + eight =