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
Let Step in the Code below to create a Compound Interest Calculator Using JavaScript
-
- The first thing we need to do is to create a standard HTML file with Doctype, header and body.
- After we have created our basic HTML Structure , Create a Form using the Form tag.
- 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
- There are 4 input tag that we need to create in this example, the “Principal Amount , Interest rate, year and number of time paid”
- 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
- 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”
- 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
- 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
- Create 4 id for the Tags “outputPrincipal/outputInterest/outputYear/outputtime/compounded”
- Now lets create our method in JavaScript
- Use this document.getElementById(“getPrincipalValue”).value; to grab all 4 of the value input by the user
- Pass all value collected into the Compund interest formulae and assign the result to var resultCompound
- Print out the result using document.getElementById(“outputPrincipal”).innerHTML by grabing the paragraph element ID that we already assign in earlier steps
- 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 Reply