HTML Academy
First program: “Don’t be shy”
Getting to know events12/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”
Click ’em all!
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Welcome to our photo gallery

Meow! You did a good job, but this is no time to take a break!

We need to program a gallery with my photos for the website of our web design studio. Our customers need to know our heroic web developer in person!

The gallery consists of several thumbnails (elements with the gallery__photo-preview class) and a large photo (full-photo class) When you click on a thumbnail, it should change to a large image. The large image should correspond to the preview that the user clicked on.

The image data is collected in the photos array. Each element in the array is a path to the full-size photo. The order of the elements in this array is the same as the order of the thumbnails in the markup.

The web designer has already prepared everything: there are preview images inside buttons with the gallery__photo-preview class, and when users click on these buttons, they will change the contents of the large image (full-photo class). As is typical of these assignments, we have been asked to program the user interface interaction.

First, find all of the thumbnails using querySelectorAll as well as the large image using querySelector, and then write the elements that have been found to variables.

We have already learned about querySelectorAll in this assignment as well as in this one from the “Getting to Know JavaScript in Your Browser” chapter. Take a look there if you have forgotten how this method works.

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' ];

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 this data array create a variable thumbnails, and write all of the elements with the gallery__photo-preview class that you found using the querySelectorAll to it.
    2. Below it, create a variable fullPhoto and write an image with the full-photo class that you found using the querySelector to it.

    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.