Using jQuery in JS, You will develop the following interface to calculate a futu
ID: 3604698 • Letter: U
Question
Using jQuery in JS,
You will develop the following interface to calculate a future value investment.
1. Open the attached HTML, JS and CSS files.
2. First, accept user entries for 'Investment Amount', 'Annual Interest Rate', and 'Number of Years'.
3. Add an event handler for the dblclick event of the Rate text box that would clear the text box.
4. Ensure the future value calculation is calculated so interest is compounded monthly instead of yearly.
5. If you haven’t already done so, add data validation to make sure it displays the error messages in the span elements that follow the text boxes. These messages should be removed when the related fields are valid. Do this one field at a time, starting from the top.
/_____future_value.js______/
var $ = function (id) {
return document.getElementById(id);
}
var calculateClick = function () {
}
window.onload = function () {
$("calculate").onclick = calculateClick;
$("investment").focus();
}
/_____future_value.html______/
<!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>
/_____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;
}
Explanation / Answer
Script
---
var $ = function (id) {
return document.getElementById(id);
}
var calculateClick = function () {
var investment = parseInt($("investment").value);
var annualRate = parseInt($("rate").value);
var monthlyRate = annualRate / 12 / 100;
var years = parseInt($("years").value);;
var months = years * 12;
var future_value = 0;
future_value = investment * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
$("future_value").value = future_value;
}
var calculateDbClick = function(){
$("investment").value ="";
$("rate").value = "";
$("years").value = "";
$("future_value").value = "";
}
var validateIn = function(){
try{
var i = $("investment").value;
if(isNaN($("investment").value) || (i <100 || i>100000)){
throw 1;
}else{
$("checkInvestment").innerHTML ="";
}
}
catch(err){
$("checkInvestment").innerHTML = "Must be an integer from 100 - 1,00,000";
$("checkInvestment").style = "color:blue;font-size:10px";
}
}
var validateRa = function(){
try{
var i = $("rate").value;
if(isNaN($("rate").value) || (i <1 || i>12)){
throw 1;
}else{
$("checkRate").innerHTML ="";
}
}
catch(err){
$("checkRate").innerHTML = "Must be a value from 1 - 12";
$("checkRate").style = "color:blue;font-size:10px";
}
}
var validateYe = function(){
try{
var i = $("years").value;
if(isNaN($("years").value) || (i <1 || i>50)){
throw 1;
}else{
$("checkYear").innerHTML ="";
}
}
catch(err){
$("checkYear").innerHTML = "Must be a value from 1 - 50";
$("checkYear").style = "color:blue;font-size:10px";
}
}
window.onload = function () {
$("calculate").onclick = calculateClick;
$("calculate").ondblclick = calculateDbClick;
$("investment").onkeyup = validateIn;
$("rate").onkeyup = validateRa;
$("years").onkeyup = validateYe;
$("investment").focus();
}
====
HTML - BODY
==
<body>
<main>
<h1 id="heading">Future Value Calculator</h1>
<label for="investment">Investment Amount:</label>
<input type="text" id="investment"><span id="checkInvestment"></span><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate"><span id="checkRate"></span><br>
<label for="years">Number of Years:</label>
<input type="text" id="years"><span id="checkYear"></span><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>
==
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.