Assessment 8 Dynamic Images, Events, and the DOM- 3240 -pt 8

Directions – Index Page

1. Open the index.html file and the js/image.switcher.js file.
2. Study the existing HTML and note the elements used. The HTML displays the first image to avoid a broken image icon. The images that the JavaScript for the page needs to cycle through are images/banner1.jpg, images/banner2.jpg, and images/banner3.jpg. Each image will take the place of the existing image displayed by the HTML (don’t add more images to the page).
3. In the JavaScript file (js/image.switcher.js), add a function that will preload the images. The function that preloads the images should include a parameter that allows passing the list of images to the function as an array. There should not be any specific file names “hard coded” in the function.
4. In the same JavaScript file, write a function that handles the switching of the image ever) three seconds.

• This can be done a couple of different ways:
• Using setTimeout() at the end of the switching function to call the switching function recursively.
• Using setlnterval() called from the window.onload function (see below) to invoke the switching function at regular intervals. (This is probably the easier approach.)

1. Preview the page in a browser. Get screenshots showing the switching through the three images and put the screenshots in a Word document. Add captions/notes identifying each image.

Gallery Page

1. Open the galley.html page and study the HTML. Preview the page in a browser and note how the existing CSS handles things when the mouse hovers over an image. As CSS has developed, it has taken over a number of interactions that used to be possible with JavaScript. There are still many interactions that CSS can’t handle, so this is where JavaScript comes in.
2. In the HTML, note the following section, since it will play a key role in this part of the assessment:

• <section id=”details”>
• </section>

1. Open the js/gallery.js file and read through its existing content. Note the existing window.onload() code, which will call the functions you will add the in the steps below
2. Add a showlmage() function that takes a parameter named e (to pass information about the mouse event). This function will be called when the user clicks the mouse on an image.
3. This function should use document.getElementBY.ld() to access the details section. Then, the function should use code like the following to get just the file name of the image that the user clicked on:

• let img = e.target
• // pop() returns the last item in the array created by split()
• let fileName = img.src.split(‘/’).pop()

1. Use the fileName for the image to create a string of HTML to display a larger version of the image clicked on and some text about the image. This HTML is not a complete page but will be inserted as the innerHTML for the details section. The CSS provided includes some styles for #details, .details-image, and .details-caption that you can use or modify, or you can add our own CSS to the .css file to style the details section of the gallery page. Just remember that you should not embed any CSS directly in the HTML.
2. Set the innerHTML properly for the details area using the string of HTML created above.
3. Create a clearlmage() function that will clear the details area. This function will be called when the user moves the mouse off of the image.
4. Test the gallery page to make sure it works correctly. Take at least four screenshots to show that the page works correctly. (You don’t need to get a screenshot of eve possible interaction, just a sample). Add captions/notes identifying each image.

Keep all JavaScript in the specified .js files in the js subdirectory. There should not be any JavaScript (or CSS) in the HTML.

Be sure to document the JavaScript that you add with comments.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Walkthroughs: You may view the following walkthrough videos to help you complete this assessment:

• .
• .
• .

Zip up the folder with the website for this assessment and submit it along with the Word document containing the screenshots. Please be sure that you submit your completed version of the code, not the starter code.