1. Write an HTML document that looks similar to Investment Calculatc x (--> 9 fi
ID: 3735518 • Letter: 1
Question
1. Write an HTML document that looks similar to Investment Calculatc x (--> 9 file:///C/Users/rab29/Dropbox/book QtE Investment Calculator Amount invested (principal) Annual rate (example: .08) Number of years Periods per year 100 0.07 10 4 $200.16 Compute future value Reset Write two functions with these headers function doFV() function computeFutureValue(principal, annualRate, years, periodsPerYear) The first function (doFV) a. takes no parameters b. is called from the onclick attribute C. gets input from the user d. calls the computeFutureValue function e. displays the result to the user The second function (computeFutureValue) computes and returns the future value of an investment. The formula for computing the future value of an investment is =(1 +r)n where fis the future value, a is the investment amount sometimes called the principal, r is the growth rate per period, and n is the total number of periods throughout the life of the investment.Explanation / Answer
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Investment Calculator</title>
<style>
p input {
float: right;
text-align: right;
}
.box {
width: 400px;
margin: auto;
}
#numberYearsBox, #periodYearBox {
width: 75px;
}
.button {
display: inline;
}
.output {
text-align: right;
float: right;
}
</style>
<script type="text/javascript">
function doFV() {
//pull information from input boxes and add to variables.
var principal = parseFloat(document.getElementById("principalBox").value);
var annualRate = parseFloat(document.getElementById("rateBox").value);
var years = parseFloat(document.getElementById("numberYearsBox").value);
var periodsPerYear = parseFloat(document.getElementById("periodYearBox").value);
//Calls the second fuction to do the calculations
var futureValue = computeFutureValue(principal, annualRate, years, periodsPerYear);
futureValue = Math.round(futureValue * 100) / 100;
//Display the result to the user.
document.getElementById("outputDiv").value = "$" + futureValue;
}
function computeFutureValue(investment, rate, years, ppYear) {
growthRate = rate / ppYear;
totalPeriod = years * ppYear;
fValue = investment * Math.pow((1 + growthRate), totalPeriod);
return fValue;
}
}
//function to reset the page.
function reset() {
var reset = document.getElementById("resetButton");
resetButton.onclick = window.location.reload();
}
</script>
</head>
<body>
<!--This will set everything inside an invisible box to control the width-->
<div class="box">
<h1>Investment Calculator</h1>
<p>Amount invested (principal) <input type="text" id="principalBox"></p>
<p>Annual rate (example: .08) <input type="text" id="rateBox"></p>
<p>Number of years <input type="text" id="numberYearsBox"></p>
<p>Periods per year <input type="text" id="periodYearBox"></p>
<div class="button">
<button type="button">Compute future value</button>
<input id="outputDiv" class="output" readonly>
</div>
<p><button type="button" id="resetButton">Reset</button></p>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.