Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

I am having some issues passing two test cases for this lab which pertain to the .lightbox element having a background color and the element’s display being set back to none when it is visible.

I would like to preface that this is not my code, as I was looking at solutions to figure out how this Lab could be done. This approach was done by leontoys.

NOTE:

I realized when I used the ‘Ask for help’ feature it assigned my post to HTML-CSS, so I deleted the post in the different category and re-posted this here since the Lab is within the JavaScript section.

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 href="styles.css" rel="stylesheet">
  </head>

  <body>
    <h1>Image Gallery</h1>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" class="gallery-item">
      <img src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" class="gallery-item">
      <img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" class="gallery-item">
    </div>
    <div class="lightbox">
      <button id="close-btn">&times;</button>
      <img id="lightbox-image">
    </div>
    <script src="script.js"></script>
  </body>

</html>

/* file: styles.css */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
}
.lightbox {
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  left: 0;
  position: fixed;
  background-color: sky-blue;
}
.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;
}

/* file: script.js */
const imgList = document.querySelectorAll(".gallery-item");
const lightBox = document.querySelector(".lightbox");
const lightBoxImage = document.querySelector("#lightbox-image");
const buttonEl = document.querySelector("#close-btn");

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

imgList.forEach(image => {
  image.addEventListener("click", itemClick);
});

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

Console:

12. Your .lightbox element should have a background color.
17. When your .lightbox element is visible and you click the .lightbox element, the .lightbox element's display should be set back to none.

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Hello sounds like that was a lot of fun working and colaborating in a big project. Is this part of the lighthouse ext by google and do you think this a java issue? In other words what is this supposed to do exactly? Also you have sky-blue and skyblue this may be an issue.

1 Like
3

From my understanding, it displays a picture gallery and upon clicking on an image it displays it in a larger form. This click events creates a modal-like pop-up where the user has to interact with the pop-up such as closing it to move on to the rest of the page. The pictures shown here are what the example shows.

Also, I’d like to clarify this wasn’t a collaboration by any means. I did not speak to this person or collaborate with them. I went to the ‘get a hint’ feature in the lab since I was stuck and had errors regarding my .forEach() callback function not being recognized as a function by the compiler. This code is done by that person and I did not contribute in any way. I am using their code to help myself understand this lab and the approach they had taken since my own wasn’t working.

The ‘sky-blue’ value for the background-color property seemed to be the issue for one of the test cases and that was resolved. However, I’m still getting the following failed test case:

17. When your .lightbox element is visible and you click the .lightbox element, the .lightbox element's display should be set back to none.

image
image893×580 115 KB

image
image889×836 132 KB