Homework SourseIn this exercise youll add three enhancements to the Future
In this exercise, you’ll add three enhancements to the Future Value application of figure 2-21. All three are relatively easy, but the third one may take some time since it requires more code. Estimated time: 20-30 minutes. 1. Open the HTML and JavaScript files in this folder: Midterm-part3\\future_value\\ Then, run the application to see how it works, especially the data validation. 2. Add an event handler for the dblclick event of the Rate text box that clears that text box. 3. Enhance the future value calculation so interest is compounded monthly instead of yearly. 4. Enhance the data validation code so 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.
html>
<head>
<meta charset=\"utf-8\">
<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\">
<span id=\"investment_error\"> </span><br>
<label for=\"rate\">Annual Interest Rate:</label>
<input type=\"text\" id=\"rate\">
<span id=\"rate_error\"> </span><br>
<label for=\"years\">Number of Years:</label>
<input type=\"text\" id=\"years\">
<span id=\"years_error\"> </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>
</html>
var $ = function (id) {
return document.getElementById(id);
}
var calculateClick = function () {
var investment = parseInt( $(\"investment\").value );
var annualRate = parseFloat( $(\"rate\").value );
var years = parseInt( $(\"years\").value );
var isValid = true;
if (isNaN(investment) || investment < 100 || investment > 100000) {
$(\"investment_error\").firstChild.nodeValue = \"Must be an integer from 100 - 100,000\";
isValid = false;
}
else {
$(\"investment_error\").firstChild.nodeValue = \"\";
}
if(isNaN(annualRate) || annualRate < .1 || annualRate > 12) {
$(\"rate_error\").firstChild.nodeValue = \"Must be a value from .1 - 12\";
isValid = false;
}
else {
$(\"rate_error\").firstChild.nodeValue = \"\";
}
if(isNaN(years) || years < 1 || years > 50) {
$(\"years_error\").firstChild.nodeValue = \"Must be an integer from 1 - 50\";
isValid = false;
}
else {
$(\"years_error\").firstChild.nodeValue = \"\";
}
// if all entries are valid, calculate future value
if (isValid) {
futureValue = investment;
for ( i = 1; i <= years * 12; i++ ) {
futureValue += futureValue * annualRate / 100 / 12;
}
$(\"future_value\").value = futureValue.toFixed();
}
}
var clearRate = function() {
$(\"rate\").value = \"\";
}
window.onload = function () {
$(\"calculate\").onclick = calculateClick;
$(\"rate\").ondblclick = clearRate;
$(\"investment\").focus();
}
pls change the javascript to the question above
Solution
Please let me know if you need more information:-
----------------------------------------------------------------------------
HTML : -
----------------------------------------------------------------------
<html>
<head>
<meta charset=\"utf-8\">
<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\">
<span id=\"investment_error\"> </span><br>
<label for=\"rate\">Annual Interest Rate:</label>
<input type=\"text\" id=\"rate\">
<span id=\"rate_error\"> </span><br>
<label for=\"years\">Number of Years:</label>
<input type=\"text\" id=\"years\">
<span id=\"years_error\"> </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>
</html>
-----------------------------------------------------------------------------
future_value.js
--------------------------------------------------------------------------
var $ = function (id) {
return document.getElementById(id);
}
var valInvest = function(){
var investment = parseInt( $(\"investment\").value );
if (isNaN(investment) || investment < 100 || investment > 100000) {
$(\"investment_error\").firstChild.nodeValue = \"Must be an integer from 100 - 100,000\";
isValid = false;
}
else {
$(\"investment_error\").firstChild.nodeValue = \"\";
}
}
var valAnnualRate = function(){
var annualRate = parseFloat( $(\"rate\").value );
if(isNaN(annualRate) || annualRate < .1 || annualRate > 12) {
$(\"rate_error\").firstChild.nodeValue = \"Must be a value from .1 - 12\";
isValid = false;
}
else {
$(\"rate_error\").firstChild.nodeValue = \"\";
}
}
var valYears = function (){
var years = parseInt( $(\"years\").value );
if(isNaN(years) || years < 1 || years > 50) {
$(\"years_error\").firstChild.nodeValue = \"Must be an integer from 1 - 50\";
isValid = false;
}
else {
$(\"years_error\").firstChild.nodeValue = \"\";
}
}
var calculateClick = function () {
var investment = parseInt( $(\"investment\").value );
var annualRate = parseFloat( $(\"rate\").value );
var years = parseInt( $(\"years\").value );
var isValid = true;
if (isNaN(investment) || investment < 100 || investment > 100000) {
$(\"investment_error\").firstChild.nodeValue = \"Must be an integer from 100 - 100,000\";
isValid = false;
}
else {
$(\"investment_error\").firstChild.nodeValue = \"\";
}
if(isNaN(annualRate) || annualRate < .1 || annualRate > 12) {
$(\"rate_error\").firstChild.nodeValue = \"Must be a value from .1 - 12\";
isValid = false;
}
else {
$(\"rate_error\").firstChild.nodeValue = \"\";
}
if(isNaN(years) || years < 1 || years > 50) {
$(\"years_error\").firstChild.nodeValue = \"Must be an integer from 1 - 50\";
isValid = false;
}
else {
$(\"years_error\").firstChild.nodeValue = \"\";
}
// if all entries are valid, calculate future value if (isValid) {
futureValue = investment;
var Effective_Annual_Rate = Math.pow((1+((annualRate/100)/(years * 12))),(years * 12)) - 1;
annualRate = annualRate + parseInt(Effective_Annual_Rate);
for ( i = 1; i <= years * 12; i++ ) {
// futureValue += futureValue * annualRate / 100 / 12;
}
$(\"future_value\").value = futureValue.toFixed();
}
}
var clearRate = function() {
$(\"rate\").value = \"\";
valAnnualRate();
}
window.onload = function () {
$(\"calculate\").onclick = calculateClick;
$(\"rate\").ondblclick = clearRate;
$(\"investment\").onkeyup = valInvest;
$(\"rate\").onkeyup = valAnnualRate;
$(\"years\").onkeyup = valYears;
$(\"investment\").focus();
}
Please provide the information lillte bit more to calculate the featuere value based on monthly.
----------------------------------------------------------------------------------
Thanks
