DOWNLOAD: Easy Savings Calculator
The Easy Savings Calculator script can be used for free on your website, and you can even modify the code to suit your needs. Our only request is that you link back to Raving Roo (http://ravingroo.com) from your website.
The Easy Savings Calculator script exists in three parts, (1) HTML code, (2) CSS code, (3) JavaScript code. Expand each of the sections below to copy the code.
Get the code:
<div class="esc-div">
<form name=savingscalc method=POST>
<p>What is your starting balance?<br>
<input type=text onkeypress="return onlyNumbers(event)" name=balance size=10> <span class="esc-error" id="balanceError"></span></p>
<p>What is the interest rate?<br>
<input type=text onkeypress="return onlyNumbers(event)" name=rate size=5> <span class="esc-error" id="rateError"></span></p>
<p>How many years?<br>
<input type=text onkeypress="return onlyNumbers(event)" name=years size=5> <span class="esc-error" id="yearsError"></span></p>
<input type=button onClick="return mySavings()" value=Calculate> <input type=button onClick="return mySavingsReset()" value=Reset>
</form>
<small>* Numbers and decimal points only.</small>
<p class="esc-finalbalance" id="finalBalance"> </p>
</div>
/* START - Easy Savings Calculator */
.esc-div {
width:450px;
background-color: #f9f9f9;
border:1px solid #cccccc;
border-radius: 7px;
padding:15px;
}
.esc-error {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#ca0000;
}
.esc-finalbalance {
margin-top:15px;
font-size:24px;
color:#ca0000;
}
/* END - Easy Savings Calculator */
/*!
* Raving Roo - Easy Savings Calculator v1.0
* Copyright 2014 by David K. Sutton
*
* You are free to use this script on your website.
* While not required, it would be much appreciated if you could link back to http://ravingroo.com
*/
function onlyNumbers(keyinput){
var input=keyinput.charCode? keyinput.charCode : keyinput.keyCode
// if key press is not a backspace, a period, or a number, then stop character input
if ((input != 8) && (input != 46)) {
if ((input < 48) || (input > 57)) {
return false;
}
}
}
function mySavings()
{
// Reset error messages to blank
document.getElementById('balanceError').innerHTML = '';
document.getElementById('rateError').innerHTML = '';
document.getElementById('yearsError').innerHTML = '';
// Form validation checking
if ((document.savingscalc.balance.value == null) || (document.savingscalc.balance.value.length == 0) || (isNaN(document.savingscalc.balance.value) == true))
{
document.getElementById('finalBalance').innerHTML = 'Please enter the missing information.';
document.getElementById('balanceError').innerHTML = 'Numeric value required. Example: 10000';
} else if ((document.savingscalc.rate.value == null) || (document.savingscalc.rate.value.length == 0) || (isNaN(document.savingscalc.rate.value) == true))
{
document.getElementById('finalBalance').innerHTML = 'Please enter the missing information.';
document.getElementById('rateError').innerHTML = 'Numeric value required. Example: 3.5';
} else if ((document.savingscalc.years.value == null) || (document.savingscalc.years.value.length == 0) || (isNaN(document.savingscalc.years.value) == true))
{
document.getElementById('finalBalance').innerHTML = 'Please enter the missing information.';
document.getElementById('yearsError').innerHTML = 'Numeric value required. Example: 10';
} else
{
// Set variables from form data
var startingbalance = document.savingscalc.balance.value;
var interestrate = document.savingscalc.rate.value / 100;
var totalyears = document.savingscalc.years.value;
// var totalmonths = document.savingscalc.years.value * 12;
var compoundsperyear = 12;
// Calculate final savings balance and display result
document.getElementById('finalBalance').innerHTML = 'Final Balance: $' + (startingbalance*Math.pow((1+interestrate/compoundsperyear),(compoundsperyear*totalyears))).toFixed(2);
}
// A = P(1 + r%/n)^nt
// startingbalance*Math.pow((1+interestrate/compoundsperyear),(compoundsperyear*totalyears))
}
function mySavingsReset()
{
// Reset everything to default/null/blank
document.getElementById('finalBalance').innerHTML = 'Values reset';
document.getElementById('balanceError').innerHTML = '';
document.getElementById('rateError').innerHTML = '';
document.getElementById('yearsError').innerHTML = '';
document.savingscalc.balance.value = null;
document.savingscalc.rate.value = null;
document.savingscalc.years.value = null;
}