Our application is coming along quickly.
We've already added in the interaction when you click the element where outputting the source.
Now we can use that and update the source value of the popup window.
And then we also need to just simply remove out the Hyde class from the show div and then that's going
to show that and initiate our overlay as well.
So when I remove that out, if I refresh it, you're going to see that that is already in place.
So we constructed that in one of the earlier lessons.
So selecting our output element and we created that area that we can output that content.
Let's use our JavaScript and select that into an object.
So right in the beginning, so that we have a full list of all of the elements that we've selected into
as objects.
This time we're using query selector because of course, there's only one element.
So we don't need to create a node list for that.
And we're selecting that one element with the class of output.
If you do by chance have more than one class of output, it's just going to select the first one.
We use query selector.
So that's the difference.
Instead, creating the node list, it will automatically just select that first one.
We also need to have our show area so that we can hide and show it so I can create another object called
show and then using the same format.
So we're using query selector.
Once again, we're going to select the element with a class of Schull.
You could also use yds and so on.
And you can also be more specific, as we did with Pop.
And then one last one that I want to select, and that's the close elements.
So we've got close in a few places and we need to create that ability to close those screens as well.
So this one is a query selector, all because we could potentially have multiple classes, a close,
and we need to have the same functionality to all of those.
So adding that in as a query selector all.
So we're ready now to output that content.
So using that output object that we just selected, we're going to use query selector inside of it so
that we're selecting the image and then setting the attribute.
And we could have just as well selected the image that's inside of the output so we could have created
an object for that.
So this is just another way that we could use that, that in this case we've got the output object and
then we're using query selector inside of the output object to select elements that are inside.
So this is in case we want to utilize output for other things within our code, which in this case we're
not going to be doing.
But in case you do want to use that mean container object, you want to select a particular element
inside of it.
You can use query selector as well inside.
So we're selecting our source attribute.
So just as we select and set attributes and then we already saw last time that we've got the source
being output within the this object.
So now and one other thing and of course, we need to be able to see it.
So selecting our show and then class list and we've got a few options for class list.
We can check to see if it contains it.
We can toggle it, we can add.
And the one that we want is remove, we want to remove out of class.
And the class that we're moving out is height.
You don't need to prefix it with the dot because of course this is already class list.
So any values that are sitting in here are already going to be classes.
So let's see how that works.
So now when I click it, we see we've got our image and we can't close it yet.
But that is working.
So far, so good.
And I know the images are a little bit squished.
So you can, of course, adjust this as needed with CSR.
And coming up in the next lesson, we need to add that last piece of functionality where we can actually
close or we can click off of within the overlay area to close our Pop-Up window.
So that's still to come.
And as you might guess, we saw that we can remove it and we also saw that we can add it.
So now it's just a matter of selecting the element with a class of clothes and then adding the ability.
So we need to we've got a query lecture hall.
So we're going to have to loop through them all and add an event listener that's going to highlight
that's going to add the class of height.
You can go ahead and try that.
And in the next lesson, I'll show you how to do that.