Image gallery
Live preview of the end result.
Source and references:
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 :)