Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

My code works as the lab intends, however tests 15 and 17 do not pass. Is there an error in my code I cannot see? Please advise.

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>Browse 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" src="">
    </div>
  </body>
<script src="script.js"></script>
</html>

/* file: styles.css */
body {
  background-color: lavender;
  width: 100vw;
  overflow: ;
  margin: 0 auto;
}
h1 {
  text-align: center;
}

.gallery {
display: flex;
justify-content: space-evenly;
align-items: ;
position: relative;
top: ;

}
.gallery-item {
  width: 30%;
}
.gallery-item:hover {
  border: 3px solid black;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
.lightbox {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: hsl(0,0%,20%);
  filter: opacity(97%);
} 
#close-btn {
  position: fixed;
  right: 0;
  
}
#close-btn:hover {
  background-color: red;
}
#lightbox-image {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  position: fixed;
  top: 10vh;
  left: 10vw;
  filter: opacity(unset);
}

/* file: script.js */
let galleryItem = document.querySelectorAll(".gallery-item")

let lightbox = document.querySelector(".lightbox")

let lightboxImg = document.getElementById("lightbox-image")

let x = document.getElementById("close-btn")



for (let i=0;i<galleryItem.length;i++) {
galleryItem[i].addEventListener("click",(event) =>  {
  if (lightboxImg.getAttribute("src") == "") {
    lightbox.style.display = "flex";
    lightboxImg.src = event.target.src.replace("-thumbnail","");
  }  
}  
)
}
function imgCancel() {
  if (lightboxImg.getAttribute("src").length > 0 ) {
    lightbox.style.display = "none"
    lightboxImg.setAttribute("src", "")
}
} 

lightbox.addEventListener("click", imgCancel)
x.addEventListener("click", imgCancel)

Your browser information:

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

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 is throwing off the tests is that you’re removing the src attribute value unnecessarily.

You should pass the tests if you remove the line of code which does that and also the corresponding conditional statement.

3

Thanks for the help. I had made my code more complicated than necessary

2 Likes