Build a Lightbox Viewer - Build a Lightbox Viewer

JavaScript
1

Tell us what’s happening:

pourquoi la question 14, 15, 16 et 17 ne passe pas :
const galleryItems = document.querySelectorAll(“.gallery-item”);
const lightbox = document.querySelector(“.lightbox”);
const lightboxImage = document.getElementById(“lightbox-image”);
const closeBtn = document.getElementById(“close-btn”);
galleryItems.forEach((item) => {
item.addEventListener(“click”, () => {
lightbox.style.display = “flex”;
const thumbnailSrc = item.getAttribute(“src”);
const fullSizeSrc = thumbnailSrc.replace("

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">
  <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">
    <img id="lightbox-image">
    <button id="close-btn"></button>
    </div>
    <script src="scipt.js"></script>
  </body>

</html>

/* file: styles.css */
.lightbox{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.7);
  display:none;
}

/* file: script.js */
const galleryItems = document.querySelectorAll(".gallery-item");
const lightbox = document.querySelector(".lightbox");
const lightboxImage = document.getElementById("lightbox-image");
const closeBtn = document.getElementById("close-btn");
galleryItems.forEach((item) => {
  item.addEventListener("click", () => {
    lightbox.style.display = "flex";
    const thumbnailSrc = item.getAttribute("src");
    const fullSizeSrc = thumbnailSrc.replace("-thumbnail", "");
    lightboxImage.setAttribute("src", fullSizeSrc);
  });
});

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

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

Your browser information:

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

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Hi there,

You have a typo.

Happy coding!