Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

:warning: I’ve updated the original post – I’ve now passed all the tests except for test 14.

:warning: I’m still stuck on test 14, even though the preview looks fine.

Test 14

  1. When you click one of your .gallery-item elements, the .lightbox element’s display property should be set to flex to make .lightbox and the two elements within it visible.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox Viewer</title>
        <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <h1>Museum Gallery</h1>
    <div class="gallery">
      <img
        class="gallery-item"
        src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg"
        width="250"
        height="150"
      />
      <img
        class="gallery-item"
        src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg"
        width="250"
        height="150"
      />
      <img
        class="gallery-item"
        src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg"
        width="250"
        height="150"
      />
    </div>
    <div class="lightbox">
      <button id="close-btn">&times;</button>
      <img id="lightbox-image" />
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  display: flex;
  position: relative; 
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 2px;

}

.gallery {
    display: flex;
  flex-direction: row;
}

.gallery-item {
  margin: 2px;
}

.lightbox {
  display: none;
  background-color: gray;
  width: 100%;
  height: 100%;  
  position: fixed;
  top: 0;
  left: 0;
}

/* file: script.js */
const gallery = document.querySelector(".gallery");
const gitem = document.querySelector(".gallery-item");
const lightbox = document.querySelector(".lightbox");
const lbimage = document.getElementById("lightbox-image");

const closeBtn = document.getElementById("close-btn");

gallery.addEventListener("click", (event) => {
  lightbox.style.display = "flex";
  lbimage.src = event.target.src;
  lbimage.src = lbimage.src.replace("-thumbnail", "");
});


closeBtn.addEventListener("click", () => {
  lightbox.style.display = "none";
});

lightbox.addEventListener("click", () => {
  lightbox.style.display = "none";
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer
https://www.freecodecamp.org/learn/full-stack-developer/lab-lightbox-viewer/build-a-lightbox-viewer

2

What test is test 14? Which lines of code do you think satisfy this test?

3

@JeremyLT

Test 14

  1. When you click one of your .gallery-item elements, the .lightbox element’s display property should be set to flex to make .lightbox and the two elements within it visible.

Before I click one of .gallery-item elements.
The HTML looks like

<div class="lightbox">...</div>

After clicking

The HTML looks like

<div class="lightbox" style="display:  flex;">...</div>
4

Where do you trigger the click event?

5

As of triggering an event I use Bubbles property.
Each time I click on . gallery-item which is a child element.
The parent element gallery listens for this click and triggers the click event.

<div class="gallery">
<img   class="gallery-item" />
<img   class="gallery-item" />
<img   class="gallery-item" />
</div>
6

unfortunately the event this is tested with doesn’t bubble

ok, the one of the .gallery-items bubbles, but most events in the tests don’t

7

I would try adding the event directly to the element the test is checking.

8

@ILM
@JeremyLT

I’ve looked at similar posts on the topic “Build a Lightbox Viewer – Build a Lightbox Viewer.” Since all three child elements share the same class, .gallery-item, I take it you mean that when one of the three child elements is clicked, all three should be selected as well. Is that correct?

The instructions for test 14 don’t seem very clear to me – they feel a bit ambiguous.

9

no, they are all tested indipendently

I wonder if it’s a timing issue, I have seen it a bit more after some recent updates

11

@ILM
@JeremyLT
@pkdvalis
@jwilkins.oboe

I followed a step from this post:

Using querySelectorAll together with a loop solved the issue with test 14.

However, I’m still wondering why the bubbles property isn’t acceptable.

12

I wanna brush up on using querySelectorAll with a loop — any course in this curriculum you’d recommend?

13

I don’t remember everything in the curriculum that well

14

const highlightedItems = userList.querySelectorAll(“.highlighted”);

highlightedItems.forEach((userItem) => {
deleteUser(userItem);
});

Here’s an example from MDN, which demonstrates that you can loop over the NodeList returned by querySelectorAll() just like an array.

15

@ILM
@JeremyLT
@dhess

I’m starting to realise that using addEventListener inside a forEach is kind of like having a for loop outside an if statement that checks whether an event, like a click or mouseover, has happened.

16

Working with the DOM, Click Events, and Web APIs - What Is the querySelectorAll() Method, and When Should You Use It? | Learn | freeCodeCamp.org

There is a bit at the bottom here with some information of looping over the nodes

and as @dhess mentioned as well you have the forEach that can be used

17

“This bit of code adds an addEventListener inside a forEach after selecting multiple elements with querySelectorAll. It wasn’t the most straightforward concept to pick up from the curriculum, but it’s starting to make sense now.”