Image gallery

Live preview of the end result.

Source and references:

• MDN: Image gallery

Condition of the task

You have been provided with some HTML, CSS and image assets and a few lines of JavaScript code; you need to write the necessary JavaScript to turn this into a working program.

Your JavaScript needs to:

• Declare a const array listing the filenames of each image, such as ‘pic1.jpg’.
• Loop through the array of filenames, and for each one insert an <img> element inside the thumb-bar <div> that embeds that image in the page.
• Add a click event listener to each <img> inside the thumb-bar <div> so that when they are clicked, the corresponding image is displayed in the displayed-img <img> element.
• Add a click event listener to the <button> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.

Solution

• The HTML file image-gallery-exercise-index.html.

• The JavaScript file image-gallery-exercise-index.html. Actually I’ve tested GitHub Copilot here :)