1
00:00:02,280 --> 00:00:06,060
So to implement this, we first of all need to get access to this backdrop,

2
00:00:06,090 --> 00:00:10,620
right? Now it has an ID of backdrop, so it should be fairly easy to select

3
00:00:10,620 --> 00:00:15,990
of course, we can add a constant here, maybe name it backdrop

4
00:00:15,990 --> 00:00:19,920
and just one other note about the naming, you can always of course also name these things

5
00:00:19,920 --> 00:00:25,950
something el or element to make it clear that you are pointing at an element in the DOM here.

6
00:00:25,980 --> 00:00:27,390
I will really leave that up to you,

7
00:00:27,390 --> 00:00:32,330
there is no best or common practice regarding that, you will find different styles,

8
00:00:32,430 --> 00:00:38,010
you just should find and pick your style and then be consistent and not switch it too often, at least not

9
00:00:38,010 --> 00:00:39,750
in one and the same project

10
00:00:39,750 --> 00:00:43,470
and here to keep names shorter, I'll go with these names here

11
00:00:43,530 --> 00:00:48,390
but as I mentioned if you preferred it, you could add el or element here to make it really clear that these

12
00:00:48,390 --> 00:00:53,020
constants hold pointers at elements on the DOM or in the DOM.

13
00:00:53,490 --> 00:00:58,590
So here you could name this backdrop element but since I don't use the element annotation on the other elements,

14
00:00:58,770 --> 00:01:01,440
I'll just name it backdrop here as well

15
00:01:01,440 --> 00:01:08,250
and with that, I went to select it and since it has an ID of backdrop, of course we can just say

16
00:01:08,640 --> 00:01:11,730
document.getElementById backdrop,

17
00:01:11,730 --> 00:01:17,220
that's the probably the best way of selecting it to be honest. An alternative, since it is the first

18
00:01:17,250 --> 00:01:18,500
element in our body

19
00:01:18,540 --> 00:01:25,260
and this also is unlikely to change to be honest because it is such a crucial background, not always

20
00:01:25,260 --> 00:01:29,490
visible element which we probably won't add much above it,

21
00:01:29,550 --> 00:01:38,250
we could of course alternatively also select it by saying backdrop is equal to document body first child,

22
00:01:38,270 --> 00:01:43,350
a first element child because the first element child in our body of course is that backdrop.

23
00:01:43,410 --> 00:01:46,350
So that would also work and it's also unlikely to change,

24
00:01:46,350 --> 00:01:52,180
so the HTML structure is unlikely to change regarding this relation of this div to the body and

25
00:01:52,260 --> 00:01:57,780
therefore this might actually always be valid but I'll go for the ID which won't break for sure

26
00:01:57,930 --> 00:02:00,030
unless we change the ID on the element of course.

27
00:02:00,510 --> 00:02:05,820
So with that, we got access to the backdrop and now as I mentioned, we could use it here and use class

28
00:02:05,820 --> 00:02:13,230
list toggle visible here as well but I don't want to tie it to this function because later I will also

29
00:02:13,230 --> 00:02:16,020
need the backdrop in other places.

30
00:02:16,020 --> 00:02:21,030
So instead I'll add a new function here, toggle backdrop,

31
00:02:21,030 --> 00:02:23,910
again I will use an arrow function here, also to be consistent,

32
00:02:23,910 --> 00:02:25,320
you could create this in any way

33
00:02:25,890 --> 00:02:32,610
and I will move that backdrop visible class toggling code into that toggle backdrop function and then

34
00:02:32,610 --> 00:02:36,430
just call that function from inside toggle movie modal

35
00:02:36,480 --> 00:02:41,520
and this allows us to then later also call that function from inside other places so that we haven't

36
00:02:41,520 --> 00:02:48,400
strictly tied this backdrop visibility to toggle movie modal. Well and with that if we save that and

37
00:02:48,400 --> 00:02:50,960
we go back, reload, click add movie,

38
00:02:50,980 --> 00:02:56,980
now we have that background. Now it would be nice if we also could click this background or this cancel

39
00:02:56,980 --> 00:03:04,510
button to then dismiss the modal and the background because right now, since this backdrop actually even

40
00:03:04,570 --> 00:03:10,060
overlays the add movie button, we get absolutely no way of dismissing this and the expected behavior of

41
00:03:10,060 --> 00:03:12,100
an application like that would be that

42
00:03:12,100 --> 00:03:17,950
well of course the cancel button closes this but also that clicking on the backdrop closes this. Now as so often,

43
00:03:18,040 --> 00:03:24,770
great practice for you but of course, we'll also do it together. So let's make sure we canclick the backdrop

44
00:03:24,800 --> 00:03:30,440
and we can click this cancel button to basically call toggleMovieModal and toggle backdrop again,

45
00:03:30,440 --> 00:03:34,880
well toggle backdrop will automatically be called when we call toggleMovieModal because inside of

46
00:03:34,880 --> 00:03:37,490
toggle movie modal, we call toggle backdrop.

47
00:03:37,490 --> 00:03:39,710
That's a lot of talking I guess.

48
00:03:39,710 --> 00:03:43,410
So, how do we get access to the backdrop and to the button?

49
00:03:43,410 --> 00:03:45,760
Well we actually already have access to the backdrop,

50
00:03:45,840 --> 00:03:51,780
all we need to do there is we need to add a new listener to it so that we can react to clicks on the

51
00:03:51,780 --> 00:03:53,010
backdrop.

52
00:03:53,010 --> 00:03:56,120
So here we can add an event listener, a click listener

53
00:03:56,230 --> 00:04:01,770
and now here important, I don't always want to call toggleMovieModal, so I don't want to tie this to

54
00:04:01,770 --> 00:04:08,190
the backdrop because whilst here in the current app state, of course I want to execute this function

55
00:04:08,190 --> 00:04:14,100
and close the modal. Later as I said, we'll also use the backdrop in other places and then I don't want

56
00:04:14,100 --> 00:04:18,010
to toggle the movie modal but do something else when we click the backdrop.

57
00:04:18,060 --> 00:04:28,600
So therefore, I will actually add a brand new function here which I'll name backdrop click handler and

58
00:04:28,630 --> 00:04:34,990
this function will then actually do everything that should be done when the backdrop is clicked,

59
00:04:34,990 --> 00:04:44,170
so here I will call toggleMovieModal and therefore connect this here so that at the moment, we still close

60
00:04:44,170 --> 00:04:44,460
that

61
00:04:44,560 --> 00:04:50,190
but we got more flexibility to also do other things when this is clicked. Now with this change already

62
00:04:50,190 --> 00:04:56,490
of course if we reload, click here, click the backdrop, this closes, we can repeat this process as often as

63
00:04:56,490 --> 00:04:57,660
we want.

64
00:04:57,660 --> 00:04:58,730
So that's great,

65
00:04:58,740 --> 00:05:03,000
now of course it would also be nice if we could click this cancel button to close this and

66
00:05:03,030 --> 00:05:03,340
for that

67
00:05:03,360 --> 00:05:05,460
let's have a look at the HTML code again.

68
00:05:05,510 --> 00:05:06,790
It's this cancel button

69
00:05:06,800 --> 00:05:11,640
I'm talking about, it doesn't have an ID and still we'll need a way of selecting it

70
00:05:11,640 --> 00:05:14,880
and now here of course, you can be very creative.

71
00:05:14,880 --> 00:05:21,000
Now you could think about getting access to the modal actions div here but we'll also have this in

72
00:05:21,010 --> 00:05:22,530
another place later. SInce

73
00:05:22,610 --> 00:05:27,540
this is the first occurrence of this, we could actually use it and select it with query selector and then

74
00:05:27,540 --> 00:05:33,390
select the first element child which is this cancel button and here, this relation is also unlikely

75
00:05:33,390 --> 00:05:33,930
to change,

76
00:05:33,930 --> 00:05:40,260
so using a DOM traversal technique like first element child should work here or we could also try to

77
00:05:40,260 --> 00:05:47,730
select it by selecting to add modal here and then select the first button which we find in there or a

78
00:05:47,730 --> 00:05:52,530
button with these classes here, with the button passive class because this is the only button with the

79
00:05:52,530 --> 00:05:56,000
button passive class in the add modal div here.

80
00:05:56,010 --> 00:05:58,190
So that would be different ways of selecting it,

81
00:05:58,200 --> 00:06:01,800
now you can certainly make arguments for the different approaches. Here,

82
00:06:01,830 --> 00:06:11,220
I'll add a constant and name this cancel add movie button because it's the button that cancels this add

83
00:06:11,220 --> 00:06:12,420
movie process

84
00:06:12,840 --> 00:06:14,840
and now as I said, there are different ways of selecting this.

85
00:06:14,850 --> 00:06:20,370
Now actually, we already have access to the add movie modal here, so we can use that and then run a query

86
00:06:20,370 --> 00:06:21,220
on that.

87
00:06:21,240 --> 00:06:25,550
So we don't have to do it on the entire document, since I'm searching for a button inside of that modal,

88
00:06:25,560 --> 00:06:31,530
we can just use add movie modal and then run a query here with query selector and then here, I could

89
00:06:31,530 --> 00:06:36,980
run a query for the first element that has the button passive,

90
00:06:37,100 --> 00:06:42,740
so this class here because this is the first and only button in this add movie modal and it's the button

91
00:06:42,740 --> 00:06:48,120
I'm interested here, with the class I mean, it's the first and only button with that class.

92
00:06:48,200 --> 00:06:54,290
So now this gives us access to this cancel movie button here,  cancel add movie button and now we can add

93
00:06:54,290 --> 00:07:01,240
it here, event listener click and now I want to execute a function of course when we click this, maybe

94
00:07:01,240 --> 00:07:12,660
add it here, cancel add movie, you can of course pick any name you want here and when this gets triggered,

95
00:07:12,690 --> 00:07:17,790
when this function gets executed, I want to call toggle movie modal because I want to close that

96
00:07:17,910 --> 00:07:18,840
movie modal.

97
00:07:18,840 --> 00:07:23,520
So here we can point at cancel add movie on our event listener

98
00:07:23,520 --> 00:07:30,910
and with that done, if we save everything and we reload here and I click cancel, this also closes it.

99
00:07:30,930 --> 00:07:33,950
So now we get different ways of interacting with that,

100
00:07:33,960 --> 00:07:39,540
now I would say it's time to make sure that we can also click add here and then have a look at all

101
00:07:39,540 --> 00:07:45,900
these input fields here, check what has been entered there, maybe even add a short check to see whether

102
00:07:45,900 --> 00:07:48,100
something valid was entered or not,

103
00:07:48,120 --> 00:07:55,110
so if it's empty you're not basically and then take that information and add a new movie as a Javascript

104
00:07:55,170 --> 00:08:01,860
object here in our script at first but then later, also as an element which we add here on our screen.