Are you ready for JavaScript?
This lesson is where we're going to bring JavaScript into our project to create our interaction of all
of our elements that we created within the earlier lesson.
So now we've got essentially an image gallery.
We've got some nice, colorful images that are sitting there and we want to create some interaction
with those images.
We need to select those images before we add an event listener so we can use document and query selector
all as we want to select a whole bunch of images.
And we might not want to just select all the ones with the image tag.
And of course, for a simple project like this, we're fine to do that.
We might want to be more specific that we want to make sure that we're only selecting images in a particular
class.
So just as we do with success, we can prefect's it with our parent that we want to use, only selecting
the elements that have a class of pop and the images inside of that.
So now if we console logout images, we're going to have a node list.
So taking a look at our node list, we've listed out all of the images.
And of course, if we added in more images are node lists would be bigger.
And these node, these images are referencing each and every one of the available images within our
page.
So we're already to start creating some interaction.
And of course, we don't have any interaction on them.
But there are a few important things to note we're going to be adding in the click event.
So on Click, we're going to be adding in.
And as you can see, there's just a ton of elements that events that are available.
And one of the most important ones here that we want it to for sure look at is s r c so source.
So each one of these has a source, of course, and this is the attribute that we're going to first
be picking up from the image as it gets clicked.
So going back into our images, let's make those clickable.
So the way to make those clickable is we need to iterate through the node list.
Node list is pretty much an array and we can loop through it using for each.
So setting up anonymous function and we've got our elements that we're going to be outputting as we
loop through.
So if we so log out the element value, I'll get rid of that node list.
There you can see that we are actually outputting each one of those elements.
And as I hover over them, we get the output of those elements and you can see that chrome as well as
highlighting them as I'm moving over them.
So we've got those elements within an object format.
And so now it's just a matter of adding an event listener.
So just like the previous lesson, that event listener, once you have it within that element object,
you add in the event listener and event listener that I want to add in is a click and also we're going
to create a function.
So I'm not using an anonymous one.
We're going to have it click out to a function.
So that means that we need to create that function.
So creating a function, call it pop image and we're going to pass in the event object.
And within the console now, we're going to output that event object, so refresh, go into our console,
we can clear that up and now every time we click it, we get that most of that that's initiating the
click.
And we also know which element is being clicked where we can use this in order to select the current
element that invoked the event.
Listener.
So now go ahead and add this into your project.
So select out all of the images.
You can use the console console, log them out as you go along just to make sure that you are selecting
them properly.
And once you've selected it and you've created that node list loop through the values of the node list,
outputting the element or whatever you want to call it, and then selecting that object name and adding
that event list and then attaching a function to that click event and then within the function for now,
you can output just that event object.
You can also output this as well.
And you can see when we output this, when it gets clicked, it's going to output that current element.
And we saw last time as well that we can get the current source of that element that invoked the click.
And that's what we're going to be using in the next lesson in order to output that source into our popup
window.
So that's still to come in the next lesson.