Congratulations on finishing this section of the course where we built out a fully functional image
popup gallery, so you click on an image, it automatically pops up and you can see that image and the
image contents within the pop up window.
Let's do a quick code review.
And this application is fully dynamic.
So if we add in more images and I'm going to just add in a few more images and this can be image for
this can be image five.
And I'll pick some random numbers here.
Not sure what colors those are going to be, but as you can see, we're generating out some additional
images.
You click those and they're fully functional within our JavaScript.
So we set up a bunch of scissors in order to have our images look nice and also create the overlay and
the popup window adding in our HTML so that we have our main image gallery area, as well as our popover
window and the structure of the popover window adding in the ability to close those.
Then we used JavaScript to connect to those elements so that we can manipulate them within our code,
so I added them in as JavaScript objects.
We had a node list for images.
As we've got multiple images, we could just have one or we could have more than one.
So we loop through all of the images that are available within the node list, adding event listeners
to each and every one of them.
And the eventless so that we added in was a click event.
And when you click it, then it goes to the function pop image that picks up the source of whatever
element triggered that event.
And we set that new attribute of our source of our Pop-Up window to be equal to the value of the source
of the image.
So whatever one gets clicked, we picked that value up and then we just overwrite the existing one within
the popup window and then we just remove the class of hide, which effectively shows the pop up window.
We needed a way to close these Pop-Up windows.
So we've added in a class of close to several different elements, including the overlay as well as
a close button.
And you could add additional ones.
So this is, again, fully dynamic.
So if you had more close buttons that you want to add and you could add those in as well, and that
would all close the Pop-Up window.
So that's the only function that it's doing.
Adding the event listener, that if you click on an element with a class a close, then what's going
to happen is we're going to add a class of hide to the element show with a class of show, with the
object show with an element which is connected to the element with a class of show.
Thanks again for taking this lesson.
And the core focus of this was using query selector all looping through those elements and then also
adding event listeners to those elements as you iterate through them and then also setting up of attributes
and manipulating, adding and removing classes from elements.