You have been provided with the HTML file (ch08-proj02.html) that includes the markup (as well as images and stylesheet) for the finished version. Preview the file in a browser. You will be replacing the markup for the three country boxes with two JavaScript loops (one contained within the other) and the document.write() function to output the equivalent markup. 2. The CSS styling has been provided. You only need to output the correct HTML. The three images are contained within

elements. The color blocks are elements whose background-color style is set via inline CSS using the hex property from the colors array in the JSON data. The image filename is contained within the filename property in the JSON data. 3. In the file ch08-proj02.js, convert the JSON string in photo-data.js into a JavaScript array object using JSON.parse(). Then write a loop that iterates through the photos array and calls outputCard(), which you will create in the next step. Pass a single photo object to outputCard(). 4. Create a function named outputCard() that is passed a single photo object. This function is going to generate the markup (using document.write) for a single photo card (a card is a term often used to describe a rectangle 8.10 Chapter Summary 415 FIGURE 8.31 Completed Project 2 containing an image then text below it). This function will call two other functions (described below): outputColors() and constructColor(). 5. Create a function named outputColors() that is passed the colors array for a single photo. It will loop through the colors and call constructColor() for each color. The string returned from constructColor() will be passed to document.write() . 6. Create a function named constructColor() that is passed a single color object. It will return a string containing the markup for a single color. It will also call constructStyle() for the background and text color. Change the text color of the color name based on the luminance property. The outputCard() function will output the markup for a single photo card. The outputColors() function will output the markup for the cards color blocks. The constructStyle() function will return a string containing the style string for the color name. The constructColor() function will return a string containing the markup for a single color block.

British Museum

London, United Kingdom

Colors

Norway Pine Glade Finch Wood Bark Barley Corn 416 CHAPTER 8 JavaScript 1: Language Fundamentals 7. Create a function named constructStyle() that is passed a single color object. It will return a string containing the CSS for the background and text color. The text color will only need to be specified of the luminance property value is less than 70. In that case, change the text color to white. Test 1. Test the page in the browser. Verify the correct data is displayed