CHAPTER 8 PROJECT 2: Photo-Sharing Site DIFFICULTY LEVEL: Intermediate Overview Demonstrate your ability to work with JSON data as well as functions. The final project will look similar to that shown in Figure 8.31. Instructions

1. 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 withinelements. 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. The outputCard ( ) function will output the markup for a single photo card. The outputColors () function will output the mark 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

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.

Finished project added below

The outputCard () function will output the markup for a single photo card. The outputColors() function will output the markup for the card's color blocks. The constructColor( ) function will return a string containing the markup for a single color The constructStyle ( ) function will return a block. string containing the style string for the color name.

/5855729828.jpg" alt="British Museum" >

British Museum

Change the text color of

London, United Kingdom

the 1 uminance property. Colors > Norway span > > Pine G1ade span> >Finch span > > Wood Bark 1e= "background-color:\#b99a5d">Barley Corn span > / div FIGURE 8.31 Completed Project 2