<!doctype html> <html> <head> <title>Future Value Calculator</title> <link rel=\
ID: 3596277 • Letter: #
Question
<!doctype html>
<html>
<head>
<title>Future Value Calculator</title>
<link rel="stylesheet" href="future_value.css">
<script src="future_value.js"></script>
</head>
<body>
<main>
<h1 id="heading">Future Value Calculator</h1>
<label for="investment">Investment Amount:</label>
<input type="text" id="investment"><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate"><br>
<label for="years">Number of Years:</label>
<input type="text" id="years"><br>
<label for="future_value">Future Value:</label>
<input type="text" id="future_value" disabled="disabled"><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
</body>
</html>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 500px;
padding: 0 1em .5em;
border: 3px solid blue;
}
h1 {
margin: .5em 0;
}
label {
float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
JAVASCRIPT:
var $ = function (id) {
return document.getElementById(id);
};
var calculateClick = function () {
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("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;
}
$("future_value").value = futureValue.toFixed();
}
};
window.onload = function () {
$("calculate").onclick = calculateClick;
$("investment").focus();
};
Short 8-1 Redo a Future Value application with jQuery In this exercise, you'll 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 Estimated time: 10 to 15 minutes. Future Value Calculator Investment Amount 10000 Annual Interest Rate: 10 Number of Years 2 Future Value: 12100 Calculate 1. Open the HTML and JavaScript files in this folder: exercises shortch08 uture value Then, run the application to refresh your memory about how it works 2. Add a script element to the HTML file that gives you access to the jQuery library. 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 3. When you have the application working right, add a JavaScript statement that moves the focus to the Investment Amount text box each time the Calculate button is clicked 4.Explanation / Answer
future_value.js
var calculateClick = function () {
var investment = parseFloat( $("#investment").val() );
var annualRate = parseFloat( $("#rate").val());
var years = parseInt( $("#years").val());
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;
}
$("#future_value").val(futureValue.toFixed());
}
};
window.onload = function () {
$("#calculate").click(calculateClick);
$("#investment").focus();
};
future_value.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 500px;
padding: 0 1em .5em;
border: 3px solid blue;
}
h1 {
margin: .5em 0;
}
label {
float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
html
HTML:
<!doctype html>
<html>
<head>
<title>Future Value Calculator</title>
<link rel="stylesheet" href="future_value.css">
<script src="future_value.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<main>
<h1 id="heading">Future Value Calculator</h1>
<label for="investment">Investment Amount:</label>
<input type="text" id="investment"><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate"><br>
<label for="years">Number of Years:</label>
<input type="text" id="years"><br>
<label for="future_value">Future Value:</label>
<input type="text" id="future_value" disabled="disabled"><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.