1
00:00:02,200 --> 00:00:08,680
So here's our skeleton, our HTML page and right now of course, no interaction is possible.

2
00:00:08,680 --> 00:00:14,380
Now the first thing that would be great if it worked would be that if I click add movie, we actually

3
00:00:14,380 --> 00:00:20,770
display an overlay, a so-called modal here which is like a pop-up but not this alert which is controlled

4
00:00:20,770 --> 00:00:21,420
by the browser

5
00:00:21,430 --> 00:00:28,270
but a pop-up which we create visually in our web page which allows us to enter some movie data and in the

6
00:00:28,360 --> 00:00:28,970
HTML code,

7
00:00:28,990 --> 00:00:31,310
we actually already got everything for that.

8
00:00:31,450 --> 00:00:38,410
This div here, this one here, this in the end is such a modal, has some CSS classes to look nice,

9
00:00:38,620 --> 00:00:43,830
has an ID, add modal which might come in handy for selecting it later and there

10
00:00:43,840 --> 00:00:51,190
I also already added a couple of inputs which allow us to add a movie title, an imageUrl and a rating which

11
00:00:51,190 --> 00:00:56,020
we then enter here and then some buttons to either cancel adding that movie which I also want to

12
00:00:56,020 --> 00:01:02,320
support or for completing adding that movie would should then add it both to a Javascript array but of

13
00:01:02,320 --> 00:01:05,080
course also output it on the page.

14
00:01:05,080 --> 00:01:10,600
If we scroll down there, I have an unordered list with no entries at the moment, I want to populate that

15
00:01:10,600 --> 00:01:12,990
list once we add movies.

16
00:01:13,060 --> 00:01:15,940
So the goal is to show this div

17
00:01:15,970 --> 00:01:20,830
and of course therefore an important question is, why is it not showing at the moment?

18
00:01:20,890 --> 00:01:27,160
Well actually because if we have a look at the CSS code, in there I added a style to this modal class

19
00:01:27,370 --> 00:01:31,780
which is the class I'm applying here to this div which sets display to none

20
00:01:31,780 --> 00:01:37,600
which basically means it's not added to the document flow, it's not visible, it's not clickable, it's like

21
00:01:37,600 --> 00:01:38,890
it wasn't there.

22
00:01:38,890 --> 00:01:45,070
It's actually part of the DOM as you can tell if you go to the elements tab, there you find that modal

23
00:01:45,310 --> 00:01:50,020
but you don't see it anywhere on the screen, if I hover over it here, if I select that, it's also not selected

24
00:01:50,020 --> 00:01:56,410
on the left because it's set to display none it's not part of the document flow, just of the DOM,

25
00:01:56,470 --> 00:02:01,570
that's an important difference because that means we will be able to select it from Javascript and then

26
00:02:01,570 --> 00:02:07,100
we can toggle this display style to show it. Actually there even is an easier way,

27
00:02:07,240 --> 00:02:12,940
there is this visible class which we can add to a modal which will set display to block and also play

28
00:02:12,940 --> 00:02:16,720
a nice little animation to fade it in and to slide it in.

29
00:02:16,780 --> 00:02:23,400
So actually our goal will be to make sure that when we click the add movie button, we reach out to this div

30
00:02:23,410 --> 00:02:28,630
here with the ID, add modal and we then add this visible class.

31
00:02:28,630 --> 00:02:34,090
These are all things we of course learned, so here already is a great place to pause and try this on your

32
00:02:34,090 --> 00:02:34,720
own

33
00:02:34,720 --> 00:02:42,350
but of course after this short pause which I give you to pause the video, we'll do it together. So let's

34
00:02:42,350 --> 00:02:43,240
try it together

35
00:02:43,460 --> 00:02:46,890
and we got two steps with which we should start,

36
00:02:46,940 --> 00:02:53,720
we need to get access to this add modal div and we can do this with the ID, we could also try to do

37
00:02:53,720 --> 00:02:59,140
it with a class selector, though you should be careful because we also got another modal here, another

38
00:02:59,150 --> 00:03:01,390
div with the exact same classes.

39
00:03:01,460 --> 00:03:06,650
So since is the first div with these classes, we would be able to use query selector to select by

40
00:03:06,650 --> 00:03:11,870
class because query selector selects the first matching element but later when we need to access the

41
00:03:11,870 --> 00:03:17,750
second modal for example, we'll definitely need to use the ID or come up with some other unique

42
00:03:17,750 --> 00:03:18,830
selection criteria.

43
00:03:19,490 --> 00:03:26,720
So here I will actually go for the ID and select it by that and you also mustn't forget that we also

44
00:03:26,720 --> 00:03:32,240
need to get access to this button so that we can add an event listener and for this, if we scroll down,

45
00:03:32,240 --> 00:03:38,480
we can have a look. Here's the header and there is this add movie button, so we also probably want to select

46
00:03:38,480 --> 00:03:44,840
this. Now we'll have to see how we can select it because this button has no ID or anything like that.

47
00:03:44,960 --> 00:03:49,880
Now of course, we can always add an ID and that might be a good idea, give this some unique ID which

48
00:03:49,880 --> 00:03:55,270
we haven't used anywhere else on the page but also to practice the different ways of selecting stuff,

49
00:03:55,310 --> 00:03:58,960
I will also use a different approach of selecting this button.

50
00:03:59,000 --> 00:04:03,860
Now let's start with the modal though and let's go to app.js and in there, I'll assign a new constant because

51
00:04:03,860 --> 00:04:11,450
I'll never assign a new value and I'll give it a name of add movie modal, the name of course is fully

52
00:04:11,450 --> 00:04:15,430
up to you but it should describe what you store in this constant and here,

53
00:04:15,440 --> 00:04:17,550
I'm in the end storing a reference to

54
00:04:17,580 --> 00:04:24,230
my modal, so to this overlay which you can add and it is the modal for adding a movie, so I will

55
00:04:24,350 --> 00:04:28,320
name it add movie modal, seems like a fitting name to me.

56
00:04:28,370 --> 00:04:35,030
Now we can select it with document and now, we can use get element by ID because our modal here has an

57
00:04:35,040 --> 00:04:36,700
ID, add modal

58
00:04:36,890 --> 00:04:43,080
so that is probably the most reasonable way of selecting it. As an alternative to that, just to also

59
00:04:43,080 --> 00:04:48,080
show this, we could also use query selector and then we just have to add a hash here because a query

60
00:04:48,080 --> 00:04:50,450
selector wants a CSS selector here.

61
00:04:50,450 --> 00:04:55,610
This would work as well, would also select it, this tends to have a bit better performance, though for

62
00:04:55,610 --> 00:05:01,130
this app it really won't matter, for most apps you'll probably not feel it but it's a little bit better

63
00:05:01,130 --> 00:05:05,360
to use get element by ID than to use a query selector if you really just want to get access to

64
00:05:05,360 --> 00:05:06,370
an element by ID,

65
00:05:06,740 --> 00:05:08,130
so that's just a side note

66
00:05:08,420 --> 00:05:13,670
and another way of getting access of course also would have been to use other techniques,

67
00:05:13,670 --> 00:05:19,610
for example we could dive into the body and then have a look at all its children, so all the child element

68
00:05:19,610 --> 00:05:24,770
nodes and then pick the second child because the first child is this strange backdrop thing which will

69
00:05:24,770 --> 00:05:25,880
become important later,

70
00:05:25,880 --> 00:05:27,530
second child would be that.

71
00:05:27,590 --> 00:05:35,610
So another way of selecting this would have been to use document body and then there, children and then

72
00:05:35,610 --> 00:05:38,520
there, the element at index one which is the second element,

73
00:05:38,520 --> 00:05:42,480
All these approaches select this movie modal, just to prove it, I'll quickly

74
00:05:42,480 --> 00:05:43,760
output it here,

75
00:05:43,860 --> 00:05:48,960
comment out the first two steps so that we don't get errors because I'm using the same constant over

76
00:05:48,960 --> 00:05:50,070
and over again

77
00:05:50,160 --> 00:05:54,480
and now with that, just go to the console here, reload,

78
00:05:54,480 --> 00:06:01,830
now we see that selected this modal and that's also true if I uncomment this and comment this back in and

79
00:06:01,830 --> 00:06:07,440
then reload, add the same modal here and also for completeness sake and this is the approach which I will

80
00:06:07,440 --> 00:06:11,440
use if we use get element by ID, we also lock that modal here.

81
00:06:11,610 --> 00:06:14,960
So these are just some ideas, of course there are more ways of selecting it,

82
00:06:15,060 --> 00:06:21,590
just to give you an ID for that but I will go with this approach because if you have an ID, you typically

83
00:06:21,600 --> 00:06:27,860
should strongly consider using that ID at least, this also will be very fast from performance perspective,

84
00:06:27,900 --> 00:06:30,980
so there is little that speaks against using this.

85
00:06:30,990 --> 00:06:33,230
So with that, we selected the movie modal,

86
00:06:33,240 --> 00:06:39,330
now as I said, we also need to get access to this button here, to the add movie button and for that, I'll add

87
00:06:39,340 --> 00:06:48,990
another constant here, add movie button or actually I'll name it start add movie button. I'll name

88
00:06:48,990 --> 00:06:54,320
it start add movie button because later, I will also have a button inside of that add movie modal, so

89
00:06:54,320 --> 00:06:59,070
inside of that modal which we just selected, there we also have an add button and I want to give this

90
00:06:59,070 --> 00:07:04,030
the add movie button named later because this will be the button when we press it

91
00:07:04,050 --> 00:07:07,050
that really adds a movie to our app,

92
00:07:07,050 --> 00:07:12,690
the button in the header starts this whole addition process which is why I will call it start add movie

93
00:07:12,690 --> 00:07:13,710
button.

94
00:07:13,710 --> 00:07:15,420
Now how can we select that?

95
00:07:15,540 --> 00:07:18,590
Of course there are different ways of selecting it,

96
00:07:18,630 --> 00:07:25,740
we could for example say document query selector and then reach out into the header and then to the

97
00:07:25,740 --> 00:07:26,220
button.

98
00:07:26,520 --> 00:07:32,190
So here I am using tag selectors because I only have one header on this entire page, it's this header

99
00:07:32,190 --> 00:07:39,270
here and then this is a normal CSS selector, we select a button inside of a header element. So we

100
00:07:39,270 --> 00:07:43,800
only have one header element, we select the first matching button which in this case also is the only

101
00:07:43,800 --> 00:07:46,530
button in this header and therefore this would give us access.

102
00:07:46,560 --> 00:07:50,200
So that's one way of doing it, another way of course

103
00:07:50,250 --> 00:07:52,370
and I will not always show all alternatives,

104
00:07:52,380 --> 00:07:52,830
no worries

105
00:07:52,830 --> 00:07:54,450
but here I do want to show it and

106
00:07:54,630 --> 00:08:00,300
so another way would be to use query selector header and then for example, last element child because if

107
00:08:00,300 --> 00:08:05,640
we have a look at our header, here we see the button is the last element child inside of the header,

108
00:08:05,640 --> 00:08:07,590
so that would be another way of selecting it.

109
00:08:07,620 --> 00:08:13,410
The downside of using this, just as before with using document body children one for the movie modal

110
00:08:13,710 --> 00:08:19,010
is that whenever we change something in the structure, whenever we add something in the header, some other

111
00:08:19,050 --> 00:08:25,140
content here after the button, some other title or anything like that, then this way of selecting it

112
00:08:25,140 --> 00:08:30,480
here will not work anymore because it always selects the last element child and if we change that in

113
00:08:30,480 --> 00:08:34,260
the HTML code, our Javascript code will select the wrong element.

114
00:08:34,380 --> 00:08:40,680
So therefore you should be careful with using this selection technique in places where the HTML content

115
00:08:40,740 --> 00:08:44,780
might change, where you as a developer might change it later.

116
00:08:44,970 --> 00:08:46,200
So therefore,

117
00:08:46,200 --> 00:08:51,030
I actually prefer this approach, as I mentioned earlier an alternative would have been to add an ID

118
00:08:51,030 --> 00:08:53,850
to this button but also to mix things up,

119
00:08:53,850 --> 00:08:55,200
let's use this query selector.