1
00:00:00,090 --> 00:00:02,380
Our application is coming along quickly.

2
00:00:02,430 --> 00:00:07,300
We've already added in the interaction when you click the element where outputting the source.

3
00:00:07,560 --> 00:00:12,290
Now we can use that and update the source value of the popup window.

4
00:00:12,390 --> 00:00:19,050
And then we also need to just simply remove out the Hyde class from the show div and then that's going

5
00:00:19,050 --> 00:00:23,140
to show that and initiate our overlay as well.

6
00:00:23,370 --> 00:00:28,530
So when I remove that out, if I refresh it, you're going to see that that is already in place.

7
00:00:28,740 --> 00:00:31,440
So we constructed that in one of the earlier lessons.

8
00:00:31,780 --> 00:00:37,380
So selecting our output element and we created that area that we can output that content.

9
00:00:37,380 --> 00:00:41,290
Let's use our JavaScript and select that into an object.

10
00:00:41,310 --> 00:00:46,320
So right in the beginning, so that we have a full list of all of the elements that we've selected into

11
00:00:46,320 --> 00:00:47,160
as objects.

12
00:00:47,430 --> 00:00:50,550
This time we're using query selector because of course, there's only one element.

13
00:00:50,560 --> 00:00:53,190
So we don't need to create a node list for that.

14
00:00:53,580 --> 00:00:56,850
And we're selecting that one element with the class of output.

15
00:00:57,090 --> 00:01:01,800
If you do by chance have more than one class of output, it's just going to select the first one.

16
00:01:01,800 --> 00:01:02,990
We use query selector.

17
00:01:03,210 --> 00:01:04,170
So that's the difference.

18
00:01:04,300 --> 00:01:08,080
Instead, creating the node list, it will automatically just select that first one.

19
00:01:08,490 --> 00:01:15,600
We also need to have our show area so that we can hide and show it so I can create another object called

20
00:01:15,600 --> 00:01:18,060
show and then using the same format.

21
00:01:18,070 --> 00:01:19,860
So we're using query selector.

22
00:01:20,100 --> 00:01:24,090
Once again, we're going to select the element with a class of Schull.

23
00:01:24,240 --> 00:01:26,520
You could also use yds and so on.

24
00:01:26,520 --> 00:01:29,450
And you can also be more specific, as we did with Pop.

25
00:01:29,460 --> 00:01:34,340
And then one last one that I want to select, and that's the close elements.

26
00:01:34,350 --> 00:01:41,200
So we've got close in a few places and we need to create that ability to close those screens as well.

27
00:01:41,430 --> 00:01:47,910
So this one is a query selector, all because we could potentially have multiple classes, a close,

28
00:01:47,910 --> 00:01:50,210
and we need to have the same functionality to all of those.

29
00:01:50,430 --> 00:01:53,000
So adding that in as a query selector all.

30
00:01:53,190 --> 00:01:56,330
So we're ready now to output that content.

31
00:01:56,580 --> 00:02:02,880
So using that output object that we just selected, we're going to use query selector inside of it so

32
00:02:02,880 --> 00:02:07,260
that we're selecting the image and then setting the attribute.

33
00:02:07,410 --> 00:02:13,110
And we could have just as well selected the image that's inside of the output so we could have created

34
00:02:13,110 --> 00:02:14,140
an object for that.

35
00:02:14,400 --> 00:02:20,100
So this is just another way that we could use that, that in this case we've got the output object and

36
00:02:20,100 --> 00:02:25,420
then we're using query selector inside of the output object to select elements that are inside.

37
00:02:25,650 --> 00:02:31,200
So this is in case we want to utilize output for other things within our code, which in this case we're

38
00:02:31,200 --> 00:02:32,340
not going to be doing.

39
00:02:32,580 --> 00:02:39,410
But in case you do want to use that mean container object, you want to select a particular element

40
00:02:39,420 --> 00:02:40,240
inside of it.

41
00:02:40,260 --> 00:02:42,770
You can use query selector as well inside.

42
00:02:43,110 --> 00:02:45,960
So we're selecting our source attribute.

43
00:02:46,320 --> 00:02:53,880
So just as we select and set attributes and then we already saw last time that we've got the source

44
00:02:54,210 --> 00:02:57,650
being output within the this object.

45
00:02:58,020 --> 00:03:01,970
So now and one other thing and of course, we need to be able to see it.

46
00:03:02,280 --> 00:03:10,080
So selecting our show and then class list and we've got a few options for class list.

47
00:03:10,320 --> 00:03:12,390
We can check to see if it contains it.

48
00:03:12,570 --> 00:03:14,730
We can toggle it, we can add.

49
00:03:14,730 --> 00:03:18,360
And the one that we want is remove, we want to remove out of class.

50
00:03:18,510 --> 00:03:21,030
And the class that we're moving out is height.

51
00:03:21,210 --> 00:03:25,710
You don't need to prefix it with the dot because of course this is already class list.

52
00:03:25,890 --> 00:03:29,460
So any values that are sitting in here are already going to be classes.

53
00:03:29,760 --> 00:03:30,850
So let's see how that works.

54
00:03:30,900 --> 00:03:35,640
So now when I click it, we see we've got our image and we can't close it yet.

55
00:03:36,330 --> 00:03:37,890
But that is working.

56
00:03:37,890 --> 00:03:39,210
So far, so good.

57
00:03:40,020 --> 00:03:42,450
And I know the images are a little bit squished.

58
00:03:42,630 --> 00:03:46,050
So you can, of course, adjust this as needed with CSR.

59
00:03:46,680 --> 00:03:51,690
And coming up in the next lesson, we need to add that last piece of functionality where we can actually

60
00:03:51,690 --> 00:03:57,570
close or we can click off of within the overlay area to close our Pop-Up window.

61
00:03:57,810 --> 00:03:59,100
So that's still to come.

62
00:03:59,220 --> 00:04:04,500
And as you might guess, we saw that we can remove it and we also saw that we can add it.

63
00:04:04,680 --> 00:04:11,550
So now it's just a matter of selecting the element with a class of clothes and then adding the ability.

64
00:04:11,550 --> 00:04:14,280
So we need to we've got a query lecture hall.

65
00:04:14,490 --> 00:04:19,650
So we're going to have to loop through them all and add an event listener that's going to highlight

66
00:04:19,680 --> 00:04:21,780
that's going to add the class of height.

67
00:04:22,020 --> 00:04:23,250
You can go ahead and try that.

68
00:04:23,250 --> 00:04:25,140
And in the next lesson, I'll show you how to do that.