Answer Happy

114 CHAPTER 3 BUILDING ARRAYS AND CONTROLLING FLOW Do the following: 1. Use your code editor to open the project03-04_txt.html and project03-04_txt.js files from the js03 ► project04 folder. Enter your name and the date in the comment section of each file and save them as project03-04.html and project03-04.js, respectively. 2. Go to the project03-04.html file in your code editor and in the head section add a script element to load the project03-04.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes. 3. Go to the project03-04.js file in your code editor. At the bottom of the file, insert function named starlmages with a single parameter named rating. The purpose of the function is to generate the HTML tags of several star images based on the value of the rating parameter. 4. Within the starImages() function add the following: a. Declare a variable named image Text, setting its initial value to an empty text string. b. Create a for loop with a counter that goes from 1 up to less than or equal to the value of the rating parameter, increasing the counter by 1 with each iteration. c. In the for loop, add the text "<img src = 'star.png' alt = ">" to the value of the image Text variable with each iteration. d. After the for loop, add a statement to return the value of image Text from the function. 5. Create a for loop with the counter variable ranging from 0 up to less than the length of the reviewers array, increasing the counter by 1 with each iteration. In this for loop you will generate the HTML code for a table that contains the review from each customer. 6. For each iteration within the for loop, do the following: a. Declare a variable named reviewCode, setting its initial value to an empty text string. b. Insert an else if statement that adds one of three possible text strings to the value of reviewCode: if the value of the reviewType for the current element in the array is equal to "P" then add the text string "<table class = 'prime'>", else if the value of the reviewType for the current element is equal to "N" then add the text string," <table class = new'>"else add the text string,"<table>". c. Add the following HTML code to the value of the reviewCode variable. (Hint: You may find it easier to break this code into several text strings that you add separately using the += assignment operator.) <caption>reviewTitles</caption> <tr><th>By</th><td>reviewers [1]</td></tr> <tr><th>Review Date</th><td>reviewDates</td></tr> <tr><td colspan='2'>reviews</td></tr> </table> where reviewTitles, reviewers, reviewDates, and reviews are the values from the reviewTitles, reviewers, reviewDates, and reviews arrays for the current element in the iteration. d. Use the insertAdjacentHTML () method to insert the value of the reviewCode variable into the first and only) <article> tag in the document, placing it directly before the closing tag. (Hint: Use the getElementsByTagName() method to reference the collection of article elements in the document.) 7. Save your changes to the file and then load project03-04.html in your web browser, verify that all four reviews are shown as indicated in Figure 3-21.