In this project, you will create code to create a table of pictures in a page from arrays.
1.Download the file data files for this project into a folder that you name assignment 5.
2.Open puppyListing.html in your favorite editor. Add your name and date.
3.Open the puppies.js. It has arrays already defined for your use in it. Review its contents.
4.Add to the puppyListing.html your library file with your addEvent, set and get cookie functions.
5.In the div element with the id of mainContent of puppyListing.html, after the first paragraph code, insert code into the provided < script> element.a.First generate the opening tags for a table followed by a header row with cells labled Picture, My Comments, Date Taken and Views.
a.First generate the opening tags for a table followed by a header row with cells labled Picture, My Comments, Date Taken and Views.
6.Loop through the puppyPics, pictureDesc, and pictureDate arrays while creating table rows that display in each row, a puppy picture, picture description, and then picture date. The Views column should be populated with the value retrieved from a cookie with the same name as the image name without the extension. (AllTheKids for the image named AllTheKids.jpg) use the split() function. If the cookie does not exist, then this value should be 0.
7.For each image in the table:
a.Make the image a link by adding an < a> tag where the href points to a generic puppy.html file.
b.When the user clicks on the image, they should be directed to the generic puppy page for the image clicked. Also when the image is clicked, a cookie should be incremented by one. The cookie name should be the same name as the image name without the extension. If the cookie does not exist then it should be created with a value of 1. No need to set the expiration date for the cookie as the intention is to track the view for the current browser session.
c.Also when the image is clicked the puppy.html page should display. Pass to the puppy.html via URL file the index of the array for the current puppy
d.In the puppy.html file:
i.Retrieve the index from the URL
ii.Using the arrays in puppies.js, populate the elements as follows based on the index:
1.Set the innerHTML for the element with the id of puppyName to the puppy name (same routine used to create the cookie name)
2.Set the src to the image filename for the image element with the id of puppyPicture
3.Set the innerHTML for the element with the id of puppyDescription to the picture description
8.Test your finished code in a browser (not Chrome).
9.For each puppy picture you select, the puppt.html file should display the details for that puppy.