CIS 144 Phase 4 Looping Statements

Create a web page with the heading CIS 144 Homework 4 - Looping Statements.

The contents of this page should be a list of links referring to Parts 1 and 2 discussed below. Label the links, Part1 and Part2. Include a short description after each part. If you do the extra credit, remember to include a link for it

DO NOT USE ALERT BOXES FOR ERROR MESSAGES!

Part 1:

Part 1a: Create a webpage that contains a script, using the for statement, that calculates the product and sum of every fourth integer from 5 to 25 inclusive and then displays the results, along with some accompanying text.

(Note: You should print a line that contains the result of 5 * 9 * 13 * 17 * 21 * 25 and a second line that contains the result of 5 + 9 + 13 + 17 + 21 + 25).

Part 1b: On the same webpage as Part 1a, create a script, using the while or do while statement, that calculates the product and sum of every third integer from 3 to 18 inclusive an then displays the results, along with some accompanying text.

(Note: You should print a line that contains the result of 3 * 6 * 9 * 12 * 15 * 18 and a second line that contains the result of 3 + 6 + 9 + 12 + 15 + 18).

Make sure you use toLocaleString() to present the result with the correct punctuation - it is horrible for users to read a big number such as 1342658 instead of reading as 1,342,658 that shows the separation of the thousands.

Part 2:

Create a webpage that contains a script that will calculate compound interest on a principal of $1000 for interest rates of 5, 6, and 7%, for years 1 through 10. The formula to use is : A = P(1 + r)n where

• P is the principal (the initial amount you borrow or deposit)
• r is the annual rate of interest (percentage)
• n is the number of years the amount is deposited
• A is the amount of money accumulated after n years, including interest

Output in table format the year followed by the total amount calculated for each of the interest rates of 5% - 7%. (Be sure to include decimals for the cents.) Your 3rd column should contain the corresponding interest rate. For example, the first 5% table rows should display as (showing only up to 4th year here below): see image.

There is NO INPUT for this problem as well! The 3 tables (one for 5%, another for 6% and another for 7%) should be shown as soon as the page is opened (loaded in the browser).

IMPORTANT NOTE: The more efficient way to resolve this problem is to make one loop inside the other (nested loop). It is not ok if you set the 3 tables first and then loop to write only the results on the tables! Think about future maintenance - for example, if the company requests to show one more table for another interest rate, or if it is requested to present 15 years, instead of 10 for each interest rate. The less places you have to modify, the better your code is considered. So, use nested loop - Tip: the outside loop should be for the interest rate that will start the new table, then the internal loop should be for each year to build the rows of that table!

You should use the CSS nth-child pseudo class to alternate the background colors of the rows of the table but notice that the first row should be maroon (dark red and the font should be white).

Notice that the values in the "Amount on Deposit" column are showing with the comma (,) separator for the thousands (tip = use the toLocaleString() for the output of that number).

For more information on calculating compound interest, see this link: http://math.about.com/library/weekly/aa042002a.htm

Extra Credit

Create a webpage that contains a script that reads in the size of the side of a square and displays a hollow square of that size constructed of asterisks. Your script should work for squares only for side sizes between 2 and 10 inclusive. Display an error message if the user enters any number that is not between 2 and 10 and, of course, DO NOT PRESENT THE SQUARE. Be sure that the output looks like a square. A common error is having the top and bottom row of asterisks appear to be smaller than the sides. [Hint: use nested while or for statements and use a monospaced CSS style for the output.]

Note: There should be NO ASTERISKS (*) inside the square - it should be a hollow square like the image below (notice that there is a space between each * printed asterisk at the top and the bottom of the square which you do not need to provide when printing the asterisks of the side of the square as the browser already provides a space between each line):