Followed a lightbox tutorial that isn't working for me

Trying to create a test page following a tutorial to get a lightbox test page up and running, before adding it to my regular site. Followed the tutorial on this (https://www.youtube.com/watch?v=uKVVSwXdLr0) but the steps along the way aren't working.

Could use some help as nothing seems to be working and have been spinning over and over retrying things. The grid works fine, images are loading, but there's no lightbox showing on the screen at all. And oddly the while the rest of the css works, the pointer doesn't show either 🤷🏻‍♂️. Thanks.

HTML Page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width", initial-scale="1.0">
    <meta http-equiv="x-UA-Compatable" content="ie=edge">
    <title>New Test Page</title>
    <script defer src="/scripts/lightbox.js"></script>
    <script src="/styles/testing.css"></script>
</head>
<body>
    <div class="group">
        <!--Add Image--> 
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="/Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="Images/javier-power.jpg" alt="" width="200" height="200">
        <img src="Images/javier-power.jpg" alt="" width="200" height="200">
    </div>
</body>
</html>

CSS Page

body{
    margin: 0;
}

.group{
    display: grid;
   grid-template-columns: repeat( 3, 200px);
   align-items: center;
   justify-content: center;
   align-content: center;
   grid-gap: 4rem;
   height: 100vh;
}

.group img{
    width: 200px;
    height: 200px;
    cursor: pointer;
}

#lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8); 
    display: none;
}

#lightbox.active{
    display: flex;
    justify-content: center;
    align-items: center;
}

// Lightbox test

const Lightbox = document.createElement('div')
Lightbox.id = 'lightbox'
document.body.appendChild(lightbox)

const images = document.querySelectorAll('img')
images.forEach(image => {
  image.addEventListener('click', e => {
    lightbox.classList.add('active')
    const img = document.createElement('img')
    img.src = img.src
    while (lightbox.firstChild){
      lightbox.removeChild(lightbox.firstChild)
    }
    lightbox.appendChild(img)
  })
})

lightbox.addEventListener('click', e => {
  if (e.target !== e.currentTarget) return
  lightbox.classList.remove('active')
})

Grid Image

Answer

It looks like you're using inconsistent capitalization in your JavaScript, so change Lightbox to lightbox throughout. Also, update the line img.src = img.src to img.src = e.target.src to correctly display the clicked image in the lightbox.

Answer

Enjoyed this question?