Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

My code works as it should. But when I click “Run the Tests”, the loading indicator runs but it never end, still keep loading forever. it stuck. when I disabled variable with “querySelector” and then click the “Run the Tests” again, no problem occurred, it load almost immediately. Anyone know the problem? It’s frustrating

Your code so far

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

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

<body>
   <div class="gallery">
    <img src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="" class="gallery-item">
    <img src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="" class="gallery-item">
    <img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="" class="gallery-item">
   </div>

   <div class="lightbox">
    <button id="close-btn">&times;</button>
    <img src="" alt="" id="lightbox-image">
   </div>

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

</html>

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

.lightbox{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1;
  top: 0;
  left : 0;
  display: none;
}

.gallery{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  z-index: 0;
  margin-top: 20px;
}


#lightbox-image{
 width: 100%;
 padding: 20px;
 justify-content: center;
 object-fit:contain;
}

#close-btn{
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  aspect-ratio: 1/1;
  font-size: 3em;
}

.gallery-item{
  height: 100px;
}

/* file: script.js */
let parent = document.querySelector(".gallery");
let lightbox = document.querySelector(".lightbox");
let lightboxImage = document.getElementById("lightbox-image");
let closeBtn = document.getElementById("close-btn");

parent.addEventListener("click", (event) => {
  event.target.style.color = "red";
  let tempSrc = event.target.getAttribute("src");

  if (tempSrc !== null) {
    tempSrc.replace("-thumbnail", "");
    lightboxImage.setAttribute("src", tempSrc);
  }

  lightbox.style.display = "flex";
  console.log(tempSrc);
});

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

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

the variable name ‘parent’ seems to cause a problem here but I’m not sure why. I suggest opening an issue in GitHub for the fCC maintainers to investigate this with you.

For the time being, when I change the name ‘parent’ to ‘gallery’, the tests stop hanging.

(instructions on how to open an issue for fCC below)

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

3

Thank you for your help. I avoided using delegation by using querySelectorAll to return array and iterated for each item and it worked. I did that before I read your reply. So I agree with you, which the problem indeed on the “parent” part.

4

In your new code, was the variable name parent still used? If not, do you mind changing the variable that you used to be called parent again because I am curious if that will break the code again?

Ps. Event delegation is a valid way to listen and react to events in JavaScript.

5

I did not save my script when I am done with the challenge. Should have saved all my script. Is there a way to access the script I submitted for the challenge?

6

what happens when you visit the challenge link again? (when I try, I can see the last code I submitted)

As for saving the code, I guess that is up to you and your preference for learning.