Compound Interest Calculator: programming skills for school students

Building compound interest calculator has both practical and didactic aspects. The skills to learn include:

HTML or Hyper Text Mark-Up Language
CSS or Cascading Style Sheets
jQuery, which is a simplified version of popular scripting language: Javascript.

In order to learn the corresponding programming technique, just follow the steps outlined below:

Create a text file. Users of Microsoft Windows could accomplish this task with popular Notepad program
Copy the following source code and save the file with any valid name (up to user discretion) and .htm extension
Delete the first and last lines (containing key word "textarea") and save the file again
Double-click on this file and it should open in your default web browser, so you could read the instruction and practice with interest calculation. You could also modify the source code up to your discretion.

The fully functioning demo of interest calculator is available at: http://webinfocentral.com/RESOURCES/InterestCalculator.htm

*************************************************************************************************************************

SOURCE CODE:

<style type="text/css">
html, body {width: 476px; margin:0; padding:0;}
div.main {width:auto; border: solid 2px red;}
div.calc {background:#f0f0f0; padding: 10px}
div.panel,div.ctl {background:#ffffcc; padding: 10px;}
div.panel {display:none;}
div.ctl{ cursor: hand; cursor: pointer;}
ul {list-style-type:none; padding-left:0px}
</style>

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){

// WATERMARK t1 ***********************************************
var wm1 = "1000";
if ($('input#t1').val() == "") { $('input#t1').val(wm1);}
$('input#t1').focus(function()
{reset(); if (this.value == wm1) {this.value = "";}})
.blur(function()
{ if (this.value == "") {this.value = wm1;}});

// WATERMARK t2 **********************************************
var wm2 = "5";
if ($('input#t2').val() == "") { $('input#t2').val(wm2);}
$('input#t2').focus(function()
{reset(); if (this.value == wm2) {this.value = "";}})
.blur(function()
{ if (this.value == "") {this.value = wm2;}});

// WATERMARK t3 ***********************************************
var wm3 = "1";
if ($('input#t3').val() == "") { $('input#t3').val(wm3);}
$('input#t3').focus(function()
{reset(); if (this.value == wm3) {this.value = "";}})
.blur(function() { if (this.value == "")
{this.value = wm3;}});

// WATERMARK t4 ***********************************************
var wm4 = "10";
if ($('input#t4').val() == "") { $('input#t4').val(wm4);}
$('input#t4').focus(function()
{reset(); if (this.value == wm4) {this.value = "";}})
.blur(function()
{ if (this.value == "") {this.value = wm4;}});

// USE TO RESET RESULT TEXT WHEN ANY INPUT GOT FOCUS
function reset(){$("span").html("Ending Balance, $");}
/************************************************************/

// TOGGLE INSTRUCTION PANEL
$("div.ctl").click(function()
{$("div.panel").slideToggle("slow");});

// CALCULATE FV USING SIMPLE OR COMPOUND INTEREST METHOD
$("button#calc").click(function(){
var FV=-1;

// PARSE USER INPUT
var PV = parseFloat($('input#t1').val());
var r = parseFloat($('input#t2').val());
var n = parseFloat($('input#t3').val());
var t = parseFloat($('input#t4').val());

// CALCULATE BALANCE USING SIMPLE OR COMPOUND INTEREST
if ($("input[name='sel']:checked").val()=="0")
{
FV = PV *(1 + r*t/100); // SIMPLE INTEREST
}
else // COMPOUND INTEREST: USE Math.pow (x,y)
{
FV = PV * Math.pow((1 + r/n/100), (n*t));
}

// FORMAT CURRENCY: ROUND TO 2 DECIMALS AND SHOW $
FV = "$" + FV.toFixed(2);

// DISPLAY THE RESULT
$("span").html(FV);
});
});
</script>
</head>

<body>
<div class = "main">
<div class = "calc">
<h3>INTEREST CALCULATOR</h3>

<ul>
<li><input type="text" id="t1"/> Principal amount (PV), $</li>
<li><input type="text" id="t2"/> Interest rate (r), %</li>
<li><input type="text" id="t3"/> Frequency per year (n)</li>
<li><input type="text" id="t4"/> Number of years (t)</li>
</ul>

<input type="radio" name="sel" value="0" checked/> Simple interest
<br/>
<input type="radio" name="sel" value="1" /> Compound interest

<hr/>
<button id ="calc">ENDING BALANCE =</button>
<strong><span>Ending Balance, $</span></strong>
<hr/>
</div>

<div class="ctl">
<h3>INSTRUCTION [+]</h3>
</div>

<div class = "panel">
In order to calculate the account's ending balance
(also known as Future Value, or FV)
by using either simple or compound (w/re-investing)
interest formulas, follow the steps:

<ol>
<li>Enter the Principal amount as number (dollars.cents)</li>
<li>Enter the annual interest rate as a number (no % sign)</li>
<li>Enter the number of payments per year (frequency)</li>
<li>Enter the period of accruing the interest (years)</li>
<li>Select either "Simple" or "Compound" radio-button</li>
<li>Click the on-screen button to calculate the balance</li>
</ol>

The formula for the ending balance calculation using
simple interest is shown below:
<h3><i>FV = PV(1+rt/100)</i></h3>
The formula for the ending balance calculation using
compound interest is shown below:
<h3><i>FV = PV(1 + r/n/100)<sup>(nt)</sup></i></h3>

More reading on this topic is available online at:
<ol>
<li><a href="http://en.wikipedia.org/wiki/Compound_interest"
target="_blank">Compound Interest on wiki</a></li>
<li><a href="http://en.wikipedia.org/wiki/Fixed_income"
target="_blank">Fixed Income on wiki</a></li>
</ol>
</div>
</div>
</body>
</html>
</textarea>