HTML Academy
Welcome to our photo gallery
Getting to know events13/25
Back to the list of tasks
  • 1. Introduction to events
  • 2. How to add a handler
  • 3. How events are arranged
  • 4. Default actions
  • 5. Please pass the function
  • 6. Hiding the popup
  • 7. Pressing a key
  • 8. Choosing a key
  • 9. With one click
  • 10. Summary of “Events in JavaScript”, part 1
  • 11. First program: “Don’t be shy”
  • 12. Welcome to our photo gallery
  • 13. Click ’em all!
  • 14. Adding an image
  • 15. A bug has crept into the system
  • 16. Scope
  • 17. Global scope
  • 18. Inside out variables
  • 19. Becoming Independent
  • 20. Closures
  • 21. Let’s prepare for school
  • 22. Fixing the gallery
  • 23. Getting to the heart of the matter
  • 24. Summary of “Events in JavaScript”, part 2
  • 25. The Second Program: “Señor Tomato”
Adding an image
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Click ’em all!

We found all of the images on the page. All that is now left for you to do is program the logic. The interaction should work as follows: The user clicks on the preview. → The large image changes.

The first step is to add click handlers for each thumbnail. All of the thumbnails are stored in the thumbnails collection. We can search through this collection in a loop by adding a click handler to the current item in the collection. So we add a handler to each thumbnail.

Inside the handler, output a string to the console and then try to click on the thumbnails. This will allow us to test that the handlers work.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Muffin Gallery</title> <link href="gallery/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="pattern"> <section class="gallery"> <h1>Muffin Gallery</h1> <p class="gallery__photo-full"> <img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Large photo"> </p> <p class="gallery__photo-previews"> <button class="gallery__photo-preview" type="button"> <img src="gallery/laptop.jpg" alt="Preview with laptop"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/microphone.jpg" alt="Preview with microphone"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/keyboard.jpg" alt="Preview with keyboard"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/signboard.jpg" alt="Preview with tablet"> </button> <button class="gallery__photo-preview" type="button"> <img src="gallery/tree.jpg" alt="Preview with tree"> </button> </p> </section> <script src="script.js"></script> </body> </html>
CSS
.gallery { display: flex; flex-direction: column; align-items: center; } .gallery__photo-full { margin-bottom: 12px; } .gallery__photo-full img { display: block; } .gallery__photo-previews { display: flex; list-style-type: none; margin: 0; width: 550px; padding: 0; justify-content: space-between; } .gallery__photo-preview { padding: 0; border: 0; border-radius: 0; background: none; } .gallery__photo-preview:hover, .gallery__photo-preview:focus { opacity: 0.7; } .gallery__photo-preview img { display: block; object-fit: cover; width: 100px; height: 100px; } .gallery__photo-preview--active img { outline: 5px solid red; outline-offset: -5px; } .pattern { background: url("gallery/leaves-pattern.png") 0 0 repeat; }
JavaScript
var photos = [ 'gallery/laptop-large.jpg', 'gallery/microphone-large.jpg', 'gallery/keyboard-large.jpg', 'gallery/signboard-large.jpg', 'gallery/tree-large.jpg' ]; var thumbnails = document.querySelectorAll('.gallery__photo-preview'); var fullPhoto = document.querySelector('.full-photo');

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. After the variables, write the loop for, which increases the value of the counter i by a unit ranging from 0 to the length of the thumbnails collection (not including the last value).
    2. Add a click handler to the current element in the thumbnails[i] array inside the loop.
    3. Add the string 'Click on the image' to the console output inside the handler.
    4. Click on one of the thumbnails and then look at the console.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.