1
00:00:00,300 --> 00:00:05,810
The previous lesson we saw how we can add a class and it was relatively straightforward, we use class

2
00:00:05,820 --> 00:00:12,150
lists and a method called ADD, and the alternative is there's a method called remove in class list

3
00:00:12,150 --> 00:00:12,570
as well.

4
00:00:12,810 --> 00:00:14,340
So I'm going to be showing you that one.

5
00:00:14,640 --> 00:00:18,120
So next we need to do is we need a way to close our model.

6
00:00:18,180 --> 00:00:23,840
There's a number of ways that we want to close this model and they rely on the user interaction.

7
00:00:23,850 --> 00:00:25,500
So either clicking the close button.

8
00:00:25,740 --> 00:00:28,300
So it's going to be one way that they can close that model.

9
00:00:28,650 --> 00:00:35,950
So once it's opened up within the object that's opened up, we can select the value for close.

10
00:00:36,300 --> 00:00:39,320
We could also place that into a global object as well.

11
00:00:39,330 --> 00:00:41,450
So it's all dependent on how you want to use it.

12
00:00:41,640 --> 00:00:47,140
And in this case, I want to use the variable object only within the scope of the ADD event listener.

13
00:00:47,400 --> 00:00:51,420
So this is what I need to select the element that is to close.

14
00:00:52,240 --> 00:00:59,550
We can call it close button using documents and our favorite query selector selecting the element with

15
00:00:59,550 --> 00:01:01,070
a class of close.

16
00:01:01,530 --> 00:01:05,370
So it's going to give us the same option that we had where we have that element.

17
00:01:05,370 --> 00:01:09,680
We selected the element and now we want to apply an event listener to that element.

18
00:01:09,900 --> 00:01:16,020
So selecting that close button object that we just created and we can add in an event listener.

19
00:01:16,050 --> 00:01:22,020
So add event listener and event listener we're listening for is click and we can just do an anonymous

20
00:01:22,020 --> 00:01:26,270
function here where when that button gets clicked, what do we want to do?

21
00:01:26,310 --> 00:01:28,580
We want to return that model.

22
00:01:28,620 --> 00:01:38,280
So adding in a return value here and selecting our model rapper using class list and the opposite of

23
00:01:38,280 --> 00:01:43,080
add you guessed it is removed so we want to remove so model.

24
00:01:43,320 --> 00:01:48,990
So it's as easy as that to remove a particular class and now we can try that out.

25
00:01:48,990 --> 00:01:54,180
So let's refresh and hit the close button and boom, our model disappears.

26
00:01:54,510 --> 00:01:57,120
So there's a few other ways that we want to close our model.

27
00:01:57,120 --> 00:01:59,900
So let's add that functionality in as well.

28
00:02:00,210 --> 00:02:06,720
So we have our model wrapper, which we can make interactive, just like the other elements where we

29
00:02:06,720 --> 00:02:09,410
can add an event listener and event.

30
00:02:09,420 --> 00:02:15,240
Listener, of course, is a click that we're listening for and then we've got our function and the code

31
00:02:15,240 --> 00:02:21,450
is going to be the same where we're closing the model so we can do a return of the model and this will

32
00:02:21,450 --> 00:02:23,100
close down the model the same way.

33
00:02:23,130 --> 00:02:26,820
So this is a click just outside of the model, but over the overlayed.

34
00:02:27,150 --> 00:02:30,180
And once we click that the same way, it closed down.

35
00:02:30,540 --> 00:02:32,810
And there's also one other one that I want to show you.

36
00:02:33,090 --> 00:02:39,090
So there's one other event listener that we want to listen for, and that's event on any one of the

37
00:02:39,090 --> 00:02:40,230
body of the elements.

38
00:02:40,230 --> 00:02:48,710
So selecting our main body, using documents, queries, selector, and we're selecting the body tag.

39
00:02:48,720 --> 00:02:55,530
So this is going to be all of our so anywhere, the user, anywhere the user has focus on the page is

40
00:02:55,530 --> 00:02:57,450
going to be captured underbody.

41
00:02:57,600 --> 00:03:00,390
And we can add an event listener just so as we had the other ones.

42
00:03:00,570 --> 00:03:04,230
And this one is going to be actually a little bit different because this isn't going to be a click.

43
00:03:04,440 --> 00:03:09,300
We're going to be listening for Key Down, and that's another event that you can listen for.

44
00:03:09,330 --> 00:03:15,210
If Key Down is pressed, then we invoke the anonymous function and you guessed it, we're going to return

45
00:03:15,210 --> 00:03:17,190
the modal wrapper class list, remove.

46
00:03:17,340 --> 00:03:21,690
But there's one other thing that we need to do and we need to track which key got pressed.

47
00:03:21,960 --> 00:03:23,130
So let's try that out.

48
00:03:23,130 --> 00:03:26,100
And for now, I'm going to log out the key values.

49
00:03:26,100 --> 00:03:29,460
So there's every key on your keyboard has a key code.

50
00:03:29,520 --> 00:03:32,720
Once we refresh and we open up our model.

51
00:03:32,730 --> 00:03:37,080
Now, if I click any of the keys, we see that we get a key value, a key number.

52
00:03:37,110 --> 00:03:38,640
So enter is thirteen.

53
00:03:38,820 --> 00:03:40,980
Space is 32.

54
00:03:41,130 --> 00:03:44,010
And the one that we want to listen for is escape, which is twenty seven.

55
00:03:44,370 --> 00:03:47,880
So getting those key codes and the key code for escape.

56
00:03:47,880 --> 00:03:55,410
So we want the user to be able to press, escape and then close the model if they press escape and escape

57
00:03:55,410 --> 00:03:57,330
is has a key code of twenty seven.

58
00:03:57,990 --> 00:04:05,610
So now we can try that out and open up our browser, click the modal pop up and I'm going to press a

59
00:04:05,610 --> 00:04:06,360
bunch of keys.

60
00:04:06,540 --> 00:04:08,370
So that's space that's enter.

61
00:04:08,850 --> 00:04:13,770
So we see their key codes being tracked within our console here.

62
00:04:13,950 --> 00:04:20,460
And when I press escape number twenty seven it closes down and you can see also if we open, we can

63
00:04:20,460 --> 00:04:27,210
open it up and close that back down again, using any one of the options that we provide the user to

64
00:04:27,360 --> 00:04:28,300
close the model.

65
00:04:28,830 --> 00:04:30,660
So now try this out for yourself.

66
00:04:30,660 --> 00:04:37,140
And this was a great exercise to try adding different event listeners to different parts of your JavaScript.

67
00:04:37,140 --> 00:04:42,420
So try to add it into your project and close down that model that we opened up in the earlier lesson.