Build a Lightbox Viewer - 9-14 & 16 fails

HTML-CSS
1

Tell us what’s happening:

my lightbox related tests - 9,10,11,12,13,14 & 16 are failing. Even though these settings are already mentioned. And also on my local PC everything seems to be working.
But they are not running on the FCC sandbox.

Please help.

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="style.css" />
  </head>

  <body>
    <div class="gallery">
      <div class="gallery-item-wrapper">
        <img
          src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg"
          alt=""
          class="gallery-item"
        />
      </div>
      <div class="gallery-item-wrapper">
        <img
          src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg"
          alt=""
          class="gallery-item"
        />
      </div>
      <div class="gallery-item-wrapper">
        <img
          src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg"
          alt=""
          class="gallery-item"
        />
      </div>
    </div>
    <div class="lightbox" style="display: none">
      <button id="close-btn">&times;</button>
      <div class="lightbox-image-wrapper">
        <img src="#" alt="" id="lightbox-image" />
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */
/* CSS */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100vh;
  width: 100vw;
  position: realtive;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery {
  display: flex;
  flex-direction: row;
  gap: 10px;
  max-width: fit-content;
  align-items: center;
  justify-content: center;
}

.gallery-item-wrapper {
  width: 25vw;
  height: 40vh;
  overflow: hidden;
  border: 2px black solid;
  transition: transform 0.2s ease-in-out;
}
.gallery-item {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease-in-out;
}

.gallery-item-wrapper:hover {
  transform: scale(1.1);
}

.gallery-item:hover {
  transform: scale(1.2);
}

.gallery-item-wrapper:active {
  opacity: 90%;
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(235, 4, 4, 0.6);
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

#close-btn {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 4rem;
  font-weight: bold;
  color: red;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.lightbox-image-wrapper {
  width: 80%;
  height: 80%;
  overflow: hidden;
  border: 2px black solid;
}

#lightbox-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* file: script.js */
const fullSizeImages = {
  "https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg":
    "https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg",
  "https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg":
    "https://cdn.freecodecamp.org/curriculum/labs/storm.jpg",
  "https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg":
    "https://cdn.freecodecamp.org/curriculum/labs/trees.jpg",
};

const galleryItem = document.querySelectorAll(".gallery-item");
const lightbox = document.querySelector(".lightbox");
const lightboxImage = lightbox.querySelector("#lightbox-image");
const closeBtn = lightbox.querySelector("#close-btn");

galleryItem.forEach((thumbnail) => {
  thumbnail.addEventListener("click", (e) => {
    showLightbox(e.target.src);
    e.stopPropagation();
  });
});

closeBtn.addEventListener("click", (e) => {
  dismissLightbox();
  e.stopPropagation();
});

lightbox.addEventListener("click", (e) => {
  dismissLightBox();
  e.stopPropagation();
});

lightboxImage.addEventListener("click", (e) => {
  e.stopPropagation();
});

function dismissLightBox() {
  lightboxImage.src = "#";
  lightbox.style.display = "none";
}

function showLightbox(source) {
  lightbox.style.display = "none";
  lightboxImage.onload = () => {
    lightbox.style.display = "flex";
  };
  lightboxImage.onerror = () => {
    console.log("Failed to load image, network error?");
  };
  lightboxImage.src = fullSizeImages[source];
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

is your CSS working at all? are you sure you have added the css file correctly?

4

Thanks for the heads up.
I have renamed the link to styles.css.

Now 13,14 & 16 fails. But they work on when I actually try them on the sandbox.

5

the tests expect 100% instead of 100vh/vw
and a display of none is expected in the selector

after clicking, a display of flex is expected (changed programmatically). I don’t think onload is possible with the tests, you need to rely only on the click event

6

Thanks for the tips,

Apart from that, it seems the test also did not like calling a function to hide the lightbox.
After that step 13 still failed, it seemed the test wanted me to not using inline style=”display:none” and instead do it in styles.css.
Thanks for your patience.