Calculate Interest

Minterest Javascript based interest calculator

Mint.com is a great, free service for monitoring your financial information in one simple and user friendly  interface. As en exercise in my new skills using JavaScript, I decided to try my hand at creating an interface that would calculate both simple and compound interest and generate a graphical representation of how your money is affected over time. I did not work with Mint on this project but borrowed their branding as I find them to have one of the freshest and most appealing layouts and color choice.

Click here to check out the web app in action

 

Javascript Below


window.onload=main;
// Formatting number values into monitary values (USD)
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

//validation of input from the user
function validate(entry) {
num = entry.value;
if (!isNaN(parseFloat(num)) && isFinite(num) || num==""){
entry.style.color = "#666666";
} else {
entry.style.color = "#ff0000";
calcButton.disabled = true;
}
}
function main(){

// creating the key for graph using raphael
var key= new Raphael(document.getElementById('key'), 400, 100);
var keyAmt = key.circle(100, 50, 20);
keyAmt.attr({fill: '#B2E5D0', stroke: 'none'});
var totalText = key.text(100, 80, 'interest')
totalText.attr({'font-size': 14});
var keyPrin = key.circle(200, 50, 20);
keyPrin.attr({fill: '#69CE91', stroke: 'none'});
var prinText = key.text(200, 80, 'Principal')
prinText.attr({'font-size': 14});
//var keyInt = key.circle(297, 50, 20);
//keyInt.attr({fill: '#FF9933', stroke: 'none'});
//var intText = key.text(297, 80, 'Interest')
//intText.attr({'font-size': 14});

// creating Raphael Graph using raphael
var totalHeight = 200;
var graph = new Raphael(document.getElementById('graph'), 400, 200);
var circAmt = graph.circle(200, 200, 40);
circAmt.attr({fill: '#B2E5D0', stroke: 'none'});
var amtSize = 5;
var circPrin = graph.circle(200, 200, 30);
circPrin.attr({fill: '#69CE91', stroke: 'none'});
var prinSize = 5;
var circInt = graph.circle(200, 200, 10);
circInt.attr({fill: '#FF9933', opacity:0, stroke: 'none'});
var intSize = 5;

// assiging elements of the DOM to variables

var intBoxValue = document.getElementById('interestTextBox'),
prinInp = document.getElementById("prinINP"),
rateInp = document.getElementById("rateINP"),
timeInp = document.getElementById("timeINP"),
errorSpace = document.getElementById("errorSpace"),
calcButton = document.getElementById("calcButton");
calcButton.onclick = calcProcess;

//assigning the value of an anonymous multiplication function
//to the variable prod to return value of interest
var prod = function(prin,rate,time) {
return (prin) * (rate/100) * (time);
}

//assigning the value of an anonymous mathmatical function
//to the variable amount to return value of total Amount
var amount = function(a,b,c){
return (Number(a)) * (1 + (((Number(b))/100) * (Number(c))));
}

// function called on Calculate button click that assigns
// values from form to the javascript elements
function calcProcess(){

// assigning variable to values of Principle
// rate and time
var prinVal = Number(prinInp.value);
var rateVal = + Number(rateInp.value);
var timeVal = Number(timeInp.value);

//checking for empty boxes
if (prinVal == "" || rateVal == "" || timeVal =="") {
errorSpace.style.display = "block";
errorSpace.attr({fill: '#ff0000', stroke: 'none'});
}
else{ (prinVal != "" || rateVal != "" || timeVal !="")
errorSpace.style.display = "none"; }

// once numebrs are entered, the variable below calls the anonymous mmathmatical functions
// that have been assigned above to calculate the interest and Amount
var amountTextBox = document.getElementById("amountTextBox");
var amountAnswer= amount(prinVal,rateVal,timeVal);
amountTextBox.value = "$" + amountAnswer.formatMoney(2, '.', ',');
var interestTextBox = document.getElementById("interestTextBox");
var interestAnswer= amountAnswer - prinVal;
interestTextBox.value = "$" + interestAnswer.formatMoney(2, '.', ',');

// settign limitations for graphic display size according to values
// input by the user
amtSize = (totalHeight);
circAmt.animate({r: amtSize}, 1000, '<>');
prinSize = (prinVal*(totalHeight/amountAnswer));
circPrin.animate({r: prinSize}, 1500, '<>');
intSize = amtSize - prinSize;
circInt.animate({r: intSize}, 2000, '<>');
//changing order of circles based on value
if (prinSize > intSize){
circInt.toFront();
}
if (intSize > prinSize){
circPrin.toFront();
}

}

}


Warning: require_once(/homepages/10/d163338452/htdocs/wp-content/themes/showcase/footer.php) [function.require-once]: failed to open stream: Permission denied in /homepages/10/d163338452/htdocs/wp-includes/template.php on line 684

Fatal error: require_once() [function.require]: Failed opening required '/homepages/10/d163338452/htdocs/wp-content/themes/showcase/footer.php' (include_path='.:/usr/lib/php5.2') in /homepages/10/d163338452/htdocs/wp-includes/template.php on line 684