Use your text editor or IDE to open the application in this folder: ch12\future_value Then, test this application with valid values to see how it works.

Review the JavaScript code for this application, and note that it includes the getRandomNumber() function.

Test this application with these values: 10000 for investment amount, 15 for interest rate, and 1000 for number of years. This should return the future value with e notation and as many significant digits as JavaScript provides for.

Change the entry for the number of years to 10000 and test the application again. This time, it should return Infinity for the future value. Thats because the future value is larger than the maximum value that JavaScript can represent.

Modify the JavaScript by adding an if statement to the for loop that calculates the future value. This if statement should test whether the future value is equal to infinity. If it is, the if statement should use the alert() method to display a message like this, where i is the counter for the loop:

Future value = Infinity

i = 4995

This if statement should also set the value of i to the value of years so the loop will end.

Add an alert() method that displays the maximum value of a JavaScript number after the for loop finishes, since this has nothing to do with the calculation. Then, test the application to see the alert messages that are displayed.

Comment out the three statements that get investment, rate, and years from the text boxes. Then, use the getRandomNumber() function to get random values for investment, rate, and years. The maximum values for these variables should be 50000, 15, and 50. The application should get these random values each time the user clicks the Calculate button, display these values in the first three text boxes, and calculate the future value using these values.

Comment out the alert() method that you added in step 6. Then, test this application by clicking on the Calculate button several times to see how the values are varied. This illustrates how a random number generator can be used to quickly test an application with a wide range of values.

Create a new function named formatFutureValue() that gets the future value after it has been calculated and returns a formatted version of that value like the one shown above. To do this, you need to use the indexOf() method to get the location of the decimal point and the substring() method to extract the cents, hundreds, thousands, and millions digits from the future value. Then, you can concatenate the parts with a dollar sign, commas, and decimal point. The trick is that some future values wont have millions of digits, so you need to provide for that with if statements.

Modify the click event handler for the Calculate button so it calls this method to format the future value after it has been calculated and then displays it in the future value text box.

Comment out the statement you added in step 10 that calls the formatFutureValue() function. Then, add code that formats the future value using the NumberFormat object of the Internationalization API.

Start by creating a new function named getDate() that gets the current date and formats it like this:

Today is 04/15/2022 at 14:29.

To do that, you need to get a Date object that contains the current date. Then, you need to use the Date methods to extract the appropriate date and time parts so you can format them as shown above. Note that 24-hour format is used.

Modify the ready event handler so it calls the getDate() function to get the formatted date and then displays it in the

element below the button in the HTML.

HTML:

The Future Value Calculator

Investment amount:

*

Interest rate:

*

Years:

*

Future value:

CSS:

body {

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

background-color: white;

margin: 0 auto;

width: 600px;

border: 3px solid blue;

padding: 0 2em 1em;

}

h1 {

color: blue;

}

div {

margin-bottom: 1em;

}

label {

display: inline-block;

width: 10em;

text-align: right;

margin-right: 0.5em;

}

span {

color: red;

font-size: .8em;

}

JAVASCRIPT:

"use strict";

const getRandomNumber = max => {

let rand = null;

if (!isNaN(max)) {

rand = Math.random();

rand = Math.floor(rand * max);

rand = rand + 1;

}

return rand;

};

const calculateFutureValue = (investment, rate, years) => {

let futureValue = investment;

for (let i = 1; i

futureValue += futureValue * rate / 100;

}

return futureValue.toFixed(2);

};

$(document).ready( () => {

$("#calculate").click( () => {

const investment = parseFloat($("#investment").val());

const rate = parseFloat($("#rate").val());

const years = parseFloat($("#years").val());

let isValid = true;

if (isNaN(investment) || investment

$("#investment").next().text("Must be a valid number greater than 0.");

isValid = false;

} else {

$("#investment").next().text("");

}

if (isNaN(rate) || rate

$("#rate").next().text("Must be a valid number greater than 0.");

isValid = false;

} else {

$("#rate").next().text("");

}

if (isNaN(years) || years

$("#years").next().text("Must be a valid number greater than 0.");

isValid = false;

} else {

$("#years").next().text("");

}

if (isValid) {

$("#future_value").val(calculateFutureValue(investment, rate, years));

}

});

$("#investment").focus();

});

In this exercise, you'll enhance a Future Value application that looks like the one that follows. Along the way, you'll work with large numbers, use a random number generator, work with dates, and work with strings. The Future Value Calculator Investment amount: Interest rate: Years: Future value: Today is 06/02/2020 at 14:47. In this exercise, you'll enhance a Future Value application that looks like the one that follows. Along the way, you'll work with large numbers, use a random number generator, work with dates, and work with strings. The Future Value Calculator Investment amount: Interest rate: Years: Future value: Today is 06/02/2020 at 14:47