rewrite the code for a Future Value application that uses JavaScript with jQuery. That will show you how jQuery can simplify an application, but also that JavaScript is still needed with jQuery applications.

1) Add a script element to the HTML file that gives you access to the jQuery library.

2) Rewrite the code in the JavaScript file so it uses as much jQuery as possible. That includes the code for the ready and click event methods, as well as selectors

3) When you have the application working right, add a statement that moves the focus to the Investment Amount text box each time the Calculate button is clicked.

------------------------------------------------------------------------------------------------------

Here is the HTML File:

Future Value Calculator

Investment Amount:

Annual Interest Rate:

Number of Years:

Future Value:

--------------------------------------------------------------------------------------

Here is the CSS:

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 500px;

border: 3px solid blue;

}

section {

padding: 0 1em .5em;

}

h1 {

margin: .5em 0;

}

label {

float: left;

width: 10em;

text-align: right;

padding-bottom: .5em;

}

input {

margin-left: 1em;

margin-bottom: .5em;

}

-----------------------------------------------------------------------------------------------

Here is the JavaScript:

var calculateClick = function () {

var investment = parseFloat( document.getElementById("investment").value );

var annualRate = parseFloat( document.getElementById("rate").value );

var years = parseInt( document.getElementById("years").value );

if (isNaN(investment) || investment <= 0) {

alert("Investment must be a valid number greater than zero.");

}

else if(isNaN(annualRate) || annualRate <= 0) {

alert("Annual rate must be a valid number greater than zero.");

}

else if(isNaN(years) || years <= 0) {

alert("Years must be a valid number and greater than zero.");

}

// if all entries are valid, calulate future value

else {

futureValue = investment;

for ( i = 1; i <= years; i++ ) {

futureValue += futureValue * annualRate / 100;

}

document.getElementById("future_value").value = futureValue.toFixed();

}

}

window.onload = function () {

document.getElementById("calculate").onclick = calculateClick;

document.getElementById("investment").focus();

}