This is a challenge lesson to take what we've learned in the earlier lessons and apply it.
So the objective of this challenge is to have some images on your page and make these images clickable,
adding event listeners and then also popping up.
So getting the image, source attribute and then showing that on the large screen, in order to do that,
you can do a window open using the source and then the image name and then you can set these parameters
for the pop up window that's going to open up.
So you can pause the video, try this out and I'll walk you through the solution.
Coming up, I've added three images into our indexed HTML and you can see there's three different images.
They all have a source value.
So that's the attribute that we're going to use in order to select and create our Pop-Up window.
So first thing we need to do is select all of the images on the page.
We've got three of them being displayed there.
Let's set up a variable in order to hold that object information.
We can call it image list and then using the document object using query selector.
Let's select all of the images from the page and we can refresh and then type in image list just to
make sure that we've got our node list of elements there.
Next, we need to loop through that list.
So using a for loop setting eye to zero, we're going to loop through while I is less than image list
length and then increment I by one.
And this is where we're going to add the event listener on the inside here.
So as we loop through each one of the elements with an index value of AI, we're going to add an event
listener on that element.
So adding event, listener and event that we're listening for is a click.
And when it gets clicked so we can create an anonymous function or we can just we can create a function
name or we could just use the anonymous one.
And in this case, there's not a whole bunch of information that we need to do.
We can select the current element.
So whenever it gets clicked, you can see we get the image options there and the image value is there.
So you can use source and that will give you the path to where the source, because this is just a regular
object and it'll give you the path to where the image is located and you can use that within the window
open method in order to create the popup.
So using this source as the path and then specifying my image, that's just a name for it.
And then there's a bunch of parameters that you can add in here.
So sizable equals.
Yes.
And let's let's just get a width for that.
So five hundred and this should be equal signs actually.
And these are just regular parameters for the pop up window.
And now we can try to make this big.
So now when I click up image, it opens up a new window.
What the image content and it opens up the image on full size using the path that's contained within
the images themselves.
There's also another example within the event listeners that you might have seen when we are looking
at the different event listeners.
So you can also do the unclick.
So this is going to do the same thing where this is directly applying that that listener to the element.
And we don't use these by default because it doesn't work across all of the different browsers.
Some of the older browsers might not take on click as well as you can't as easily remove out this type
of event listener as you can with when you add the event listener.
So that's what the difference is.
And at the end of the day, it is the same thing.
The functionality is the same.
But most of the time I do prefer using the ADD event listener and I'll show you that they do work the
same way.
So even if we were to comment this one out.
So just do a block comment instead of add that listener.
We can do the on click, set that up and it's expecting a function on the other side so it'll work the
same way where it's got the function.
But we don't need that other wrapping line.
And when we refresh it, the results are the same thing.
It's going to work the same way.
And there are, of course, some disadvantages here as well.
So the odd event listener is a much more flexible method of doing it.
But you will see developers using the unclick as well.
And for each one of these and as we saw within the element, there's all these different event listener
letters on Click on Mouse and a whole bunch of different ones that we saw within the document directory.