Build a Lightbox Viewer - Build a Lightbox Viewer

Curriculum Help
1

Tell us what’s happening:

Hi everyone, I’m a bit confused about how tests 16 and 17 work, although my current code passed all the tests. My code allows clicking the image to close the lightbox! I think it happens because of event bubbling.

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

My question: Is the requirement supposed to allow this behavior since it passed the tests, or is there a way I should fix my current code so it behaves exactly like the example project?
Thank you!

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>The Art Gallery</h1>
<div class="gallery">
  <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="stonehenge" />
  <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="storm" />
  <img class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="trees" />
</div>
<div class="lightbox">
  <button id="close-btn">&times;</button>
  <img id="lightbox-image" src=""/>
</div>

<script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
body{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to top, hsl(200, 83%, 52%), white);
  height: 100vh;
}
h1{
  background-color: hsla(200, 83%, 52%, 0.712);
  width: 100%;
  font-family: arial;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 80px;

}
.gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px;
  padding: 20px;
}

.gallery img {
  width: 250px;
  height: 320px;
  object-fit: cover;
  cursor: pointer;
  transition: 0.5s transform ease;
}

.gallery img:hover{
  transform: scale(1.05);
}

.lightbox{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsla(0, 0%, 20%, 0.80);
  display: none;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lightbox img{
 width: 50%;
 height: auto;
}

#close-btn{
  font-size: 2rem;
  font-weight: 600;
  color: white;
  border: 1px solid white;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background-color: transparent;
  padding: 0;
  margin: 50px;
  cursor: pointer;
  text-align: center;
}

#close-btn:hover{
  background-color: black;
}

/* file: script.js */
const images = document.querySelectorAll(".gallery-item");
const lightBox = document.querySelector(".lightbox");
const closeBtn = document.getElementById("close-btn");
const lightBoxImg = document.getElementById("lightbox-image");

images.forEach((image)=>{
  image.addEventListener("click",()=>{
    lightBox.style.display = 'flex';

    const imgName = image.src.substring(image.src.lastIndexOf('/')+1, image.src.lastIndexOf('-'));

    console.log(imgName);

    lightBoxImg.setAttribute("src", `https://cdn.freecodecamp.org/curriculum/labs/${imgName}.jpg`);
    
  });
});

lightBox.addEventListener("click",()=>{
  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/152.0.0.0 Safari/537.36

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @veinlim92,

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

Happy coding