Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

My code does not pass 14th test… I’ve tried setting initial display:none to all element in .lightbox and still no success.

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>Gallery</h1>
    <div class='gallery'>
      <img class='gallery-item' src='https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg'>
      <img class='gallery-item' src='https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg'>
      <img class='gallery-item' src='https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg'>

    </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 */
h1 {
  color: auto;
  background-color: lightcyan;
  text-align: center;
}
.gallery-item {
  height: 300px;
  width: 200px;
  object-fit: cover;
}
.gallery {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.gallery-item:hover {
  cursor: pointer;
}

.lightbox {
  display: none;
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.8);
  justify-content: center;
  align-items: center;
}

#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  background: none;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 2em;
  cursor: pointer;
}
#lightbox-image {
  width: 95vw;
  object-fit: contain;
}

/* file: script.js */
'use strict'
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");

  const lightbox = document.querySelector('.lightbox');
  const gallery = document.querySelector('.gallery');
  const lightboxImage = document.querySelector('#lightbox-image');

  gallery.addEventListener('click', (event) => {
    const clickedElement = event.target;
    if (clickedElement.tagName === "IMG") {
      const imageSrc = clickedElement.src;
      lightboxImage.src = imageSrc.replace('-thumbnail', '');
      lightbox.style.display = 'flex'
    };
  });

  const closeButton = document.getElementById('close-btn')

  closeButton.addEventListener('click', () => {
    lightboxImage.style.display = 'flex';
    lightbox.style.display = 'none';
    
  });

  lightbox.addEventListener('click', (event) => {
    if (event.target !== lightboxImage) {
    lightbox.style.display = 'none'
    };
  });



});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

I think the tests might not like that you are bubbling the event up to the gallery. Try setting the click event on each .gallery-item instead.

3

i tried to check the tests and I don’t see any reason why they are failing:

const lightbox = document.querySelector(".lightbox");

function getComputedDisplay(element) {
  return window.getComputedStyle(element).display;
}

assert.strictEqual(getComputedDisplay(lightbox), "none");

const galleryItem = document.querySelector(".gallery-item");
galleryItem.dispatchEvent(new Event("click"));

assert.strictEqual(getComputedDisplay(lightbox), "flex");
4

It’s a bit mysterious right? Is it possible “dispatchEvent” does not bubble to the gallery in the same way?

Ah yes: https://stackoverflow.com/questions/23048322/why-firing-a-defined-event-with-dispatchevent-doesnt-obey-the-bubbling-behavior

I did test setting the event on the .gallery-item directly and it worked.

Maybe the test could be updated with { bubbles: true } though

1 Like
5

Please open an issue. I think they ought to fix it if it is that easy

1 Like
6

Thank you for your support. How do I open an issue and should I?
I changed my code by applying forEach to to every img item and it worked, all passed.

1 Like
7

I was making the comment about opening the issue to @pkdvalis as he found it. So hopefully he saw that.

Glad you got things working on your end.

1 Like