Build a Lightbox Viewer - Build a Lightbox Viewer

HTML-CSS
1

Tell us what’s happening:

My test 14 and 17 doesn’t pass
14. When you click one of your .gallery-item elements, the .lightbox element’s display property should be set to flex to make .lightbox and the two elements within it visible.

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>
    <div class = "gallery first">
      <img class = "gallery-item" src ="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg"><img>
      <img class = "gallery-item" src ="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg"><img>
      <img class = "gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg"><img>
    </div>
    <div class ="lightbox">
      <button id = "close-btn">&times</button>
      <img id = "lightbox-image"></img>
    </div>
  <script src = "./script.js"></script>
  </body>

</html>

/* file: styles.css */
*,*::before,::after{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.gallery{
  display: flex;
  justify-content: space-between;
}
.gallery .gallery-item{
  margin-left: 10px
}
.gallery .first{
  margin-left:0;
}
.lightbox{
  display: none;
  position: fixed;
  left:0;
 top:0;
  background: rgba(0,0,0,0.6);
  height: 100%;
  width: 100%;
}



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


function pop(node) {
node.addEventListener("click", ()=> {
  lightBox.style.display = "flex"
  let reduced = node.src.replace("-thumbnail","")
  img.src = reduced
  console.log(reduced)
  img.setAttribute("src",reduced)
  console.log("This works for me")
})
}
imgItems.forEach(pop)

function check(){

if(lightBox.style.display = "flex"){
  closeBtn.addEventListener("click",()=>{
    lightBox.style.display = "none"
  })
 
}
else if(lightBox.style.display = "flex"){
    lightBox.addEventListener("click",()=>{
      lightBox.style.display = "none"
    })

}
}

check()

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

Can you please indicate which line of code implements that requirement?

3

It looks ok and appears to work, however here is something to investigate. Add this line to the end of your code:

console.log(lightBox.style.display);

It should start off as none but it returns flex initially.

I also question this if structure:

if(lightBox.style.display = "flex"){
  closeBtn.addEventListener("click",()=>{
    lightBox.style.display = "none"
  })
 
}
else if(lightBox.style.display = "flex"){

The if and else if conditions are the same.