DOM Image Object in JavaScript

JavaScript Events Lab

1. Produce a site that looks and works just like the site shown in the screencast DOM Events Lab Sample Video.mp4that’s attached to this lab under 'assets' below.

In this lab assignment, you are creating the structure, presentation, and behavior of a simple image gallery.

Use the thumbnails and full-size images that are provided in the lab folder on the class website.

You should use event listeners to control the behavior of click events.

You should create image elements with DOM Core methods as they are needed and remove image elements with DOM Core methods when they are no longer needed.

Name your JavaScript file gallery.js, put it in a folder called js that is in the root folder of your lab, and include it in your document as an external file, like this:

<script src="js/gallery.js"></script>

Don’t forget to indent HTML elements in your code to show the parent/child relationships between them!

Your HTML document should validate against the HTML 5 DTD.

2. When you are done with part one, modify your code to meet these criteria:

1. Store full-size image filenames in an array called images and reference all full-size image URLs from that array
2. Create a second array called captions that stores a caption for each of the images in the images folder
3. Modify your JavaScript so that captions appear below each full-size image when a thumbnail is clicked.