Build a Lightbox Viewer - Test Fails Even Though Lightbox Closes on Click Outside

JavaScript
1

Tell us what’s happening:

Hi Campers, I’m working on the Lightbox Viewer project. The lightbox closes when I click outside the image. But the test is still failing saying that the lightbox should close when I click outside the image.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Lightbox Viewer</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Image 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">
        <span id="close">&times;</span>
        <img id="lightbox-image">
        </div>
</body>
    <script src="script.js"></script>
</html>

/* file: script.js */
const galleryItems = document.querySelectorAll(".gallery-item");
const lightBox = document.querySelector(".lightbox");
const lightBoxImage = document.getElementById("lightbox-image");

const itemClick = (event) => {
  const imageThumbnail = event.target.src;
  lightBox.style.display = "flex";
  const image = imageThumbnail.replace("-thumbnail", "");
  lightBoxImage.src = image;
  event.stopPropagation();
};

galleryItems.forEach((galleryItem) => {
  galleryItem.addEventListener("click", itemClick);
});

document.addEventListener("click", (e) => {
  if (lightBox.style.display === "flex" && e.target !== lightBoxImage) {
    lightBox.style.display = "none";
  }
});



/* file: styles.css */
*{
  padding : 0;
  margin : 0;
  box-sizing: border-box;
}

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

  .gallery{
    border : 1px solid skyblue;
    padding : 5%;
    margin: 5%;
    display : flex;
    justify-content: space-between;
  }

.gallery-item{
  height : 200px;
  width : auto;
  margin : 5%;
  border : 1px solid skyblue;
  padding : 1%;
}

h1{
  margin : 5%;
  text-align: center;
  background-color: skyblue;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

It is because of the event delegation. Add the close event listener to the close button, not the document.

I will say the way the requirement is worded it should work using event delegation, but it doesn’t. Also, the requirements are inconsistent. The initial requirement is.

  1. When your .lightbox element is visible and you click the #close button or the .lightbox element, the .lightbox elements display should be set back to none.

But the test output says “click anywhere outside the image”

  1. When your .lightbox element is visible and you click anywhere outside the image, the .lightbox elements display should be set back to none.

But the test doesn’t account for “click anywhere outside the image”.

I will open an issue for it.

1 Like
3

Thank you so much. Yes, adding the event listener to close button, worked.