1
00:00:02,180 --> 00:00:07,640
The first step again is to get access to that add button here and we can select this like we selected

2
00:00:07,640 --> 00:00:12,740
the cancel button, just with button success or actually based on the cancel button

3
00:00:12,740 --> 00:00:16,490
and then we take the next element sibling which would be this add button

4
00:00:16,490 --> 00:00:19,650
and here it's unlikely that another button gets added,

5
00:00:19,670 --> 00:00:26,150
so using the DOM traversal technique actually should be fine here but using a query selector or assigning

6
00:00:26,150 --> 00:00:31,580
an ID to it which you could do of course, that's also totally fine.

7
00:00:31,580 --> 00:00:43,720
Here also to practice the DOM traversal, I'll add my confirm add movie button and use my cancel add

8
00:00:43,770 --> 00:00:49,710
movie button here and then next element sibling which will give me the next element sibling which

9
00:00:49,710 --> 00:00:52,770
is just this  confirm add movie button.

10
00:00:52,890 --> 00:00:58,260
Now we can take that and add an event listener to this button as well here at the bottom, add event listener

11
00:00:58,410 --> 00:01:04,800
click and I want to add an event listener here where I trigger a function where we then collect all

12
00:01:04,800 --> 00:01:11,900
the input and try to do something with that. So I'll add a new function here, add

13
00:01:11,970 --> 00:01:17,840
movie and actually I'm not quite happy with the names I've picked here,

14
00:01:17,910 --> 00:01:20,970
I name this here backdrop click handler, here

15
00:01:21,000 --> 00:01:22,980
I name these functions in a different way

16
00:01:22,980 --> 00:01:25,630
and I mentioned earlier in the course that you should be consistent

17
00:01:25,770 --> 00:01:33,570
and actually I like this approach of having handler at the end of functions which are triggered by an

18
00:01:33,570 --> 00:01:34,880
event listener.

19
00:01:35,010 --> 00:01:39,930
Now for toggleMovieModal, you could go either way because this also is a function which I call from

20
00:01:39,930 --> 00:01:41,210
inside my code,

21
00:01:41,250 --> 00:01:42,930
I also attach it to event listeners,

22
00:01:42,930 --> 00:01:45,680
so you could argue that I should add handler to it,

23
00:01:45,690 --> 00:01:51,110
you could argue that it makes sense to not add it because I also call it from other places. For backdrop

24
00:01:51,120 --> 00:01:53,290
click handler, there

25
00:01:53,320 --> 00:01:55,010
I didn't actually connect this here,

26
00:01:55,010 --> 00:01:56,450
I should have done that of course,

27
00:01:56,970 --> 00:01:58,140
yes that's a mistake,

28
00:01:58,140 --> 00:02:02,880
so there I connect this to the backdrop and that has the right naming because it is only is called upon

29
00:02:02,910 --> 00:02:09,720
a click listener. For cancel adding a movie, I should also add a handler here because I only call

30
00:02:09,720 --> 00:02:12,460
this or I only connect this to an event listener as well

31
00:02:12,660 --> 00:02:17,490
and for adding a movie here, I will also only call this when this button is clicked, so upon an event

32
00:02:17,490 --> 00:02:18,230
listener,

33
00:02:18,270 --> 00:02:20,940
so I will also name this add movie handler.

34
00:02:20,970 --> 00:02:23,960
So now these names should be fine and should be consistent

35
00:02:24,060 --> 00:02:28,270
and whilst it is of course not the end of the world if you make a mistake there,

36
00:02:28,290 --> 00:02:33,330
you should try to be consistent here because that ultimately improves readability of your code and

37
00:02:33,390 --> 00:02:34,950
makes it easier to understand.

38
00:02:35,790 --> 00:02:41,250
So with that, we get the add movie handler function connected to that confirm add movie button,

39
00:02:41,250 --> 00:02:48,360
now my goal is to select all the values that were added by the user, so the inputs to these three

40
00:02:48,510 --> 00:02:54,690
inputs, validate them with a very basic validation where I just check whether they're empty and for

41
00:02:54,690 --> 00:02:55,530
this input here,

42
00:02:55,530 --> 00:03:02,430
I want to check if the number that was entered is between 1 and 5 and then add a movie object in some

43
00:03:02,430 --> 00:03:05,400
array which we also have to add in our script.

44
00:03:05,400 --> 00:03:10,730
So let's get access to these inputs here and of course, you can select them in different ways,

45
00:03:10,740 --> 00:03:16,710
you could select them as a list by selecting the input element, you could select each one individually

46
00:03:16,710 --> 00:03:17,780
by its ID, 

47
00:03:17,790 --> 00:03:21,280
now to practice this list selection which we haven't done thus far,

48
00:03:21,300 --> 00:03:26,640
I will actually add a new constant here, input or just inputs,

49
00:03:26,730 --> 00:03:31,500
alternatively of course input elements but I haven't used element before so I'll not start now, just

50
00:03:31,500 --> 00:03:39,660
name this maybe user inputs and then here reach out to my add movie modal and in there, we can use query

51
00:03:39,660 --> 00:03:45,630
selector all to select all elements that meet this CSS selector and here I'm selecting all elements

52
00:03:45,630 --> 00:03:46,650
with an input tag

53
00:03:46,680 --> 00:03:53,040
so that of course will select these three inputs here and as an alternative, you could also have used the

54
00:03:53,040 --> 00:04:00,530
more old school method of get elements by tag name input, that would also work and is also totally fine

55
00:04:00,540 --> 00:04:04,290
to be used but I'll go with the query selector all method.

56
00:04:04,290 --> 00:04:11,130
So this gives me all these inputs here in an array-like object, in such a node list and therefore now

57
00:04:11,130 --> 00:04:16,080
we can use this here in add movie handler to retrieve the values from there.

58
00:04:16,080 --> 00:04:25,330
So there, I want to get my title value let's say and I can get this from user inputs and there

59
00:04:25,330 --> 00:04:28,250
the first element at index 0,

60
00:04:28,340 --> 00:04:33,360
that will be this title input and the order is also unlikely to change,

61
00:04:33,380 --> 00:04:36,350
so accessing it by index like this should be fine.

62
00:04:36,380 --> 00:04:41,240
You could of course also come up with more dynamic solutions but actually, we would need a bit more Javascript

63
00:04:41,240 --> 00:04:45,740
knowledge to implement a more dynamic solution and this solution is absolutely fine.

64
00:04:45,770 --> 00:04:51,830
So here, I select the first element and then .value because this will be an input element, so we will

65
00:04:51,830 --> 00:05:01,430
have a value property there, duplicate this and add an imageUrl value here which is the value of the

66
00:05:01,430 --> 00:05:04,140
second input because that is our imageUrl

67
00:05:04,150 --> 00:05:07,390
input and the third input is this rating,

68
00:05:07,490 --> 00:05:09,830
so duplicate this once more

69
00:05:09,860 --> 00:05:13,550
and there we have the rating value,

70
00:05:13,640 --> 00:05:17,860
select the third element with index two therefore and get that value

71
00:05:17,930 --> 00:05:24,570
and now with that, I just want to quickly check the input values here and check if title value

72
00:05:24,650 --> 00:05:27,160
and now there's a helpful method you can call on strings,

73
00:05:27,200 --> 00:05:28,640
the .trim method,

74
00:05:28,760 --> 00:05:35,240
this will remove excess whitespace at the beginning and at the end of the input so that if you enter

75
00:05:35,240 --> 00:05:41,570
something like this which essentially is an empty value but technically is not an empty string, that

76
00:05:41,570 --> 00:05:45,950
if you enter something like this, it's still treated as an empty string because trim will remove

77
00:05:45,950 --> 00:05:50,330
such excess whitespace, so whitespace which is not between two words.

78
00:05:50,330 --> 00:05:55,970
So if the trimmed value, so the value which is corrected for all excess whitespace,

79
00:05:55,970 --> 00:06:03,800
if that is equal to an empty string or if imageUrl value, if we trim that, is equal to an empty

80
00:06:03,800 --> 00:06:07,550
string or if the rating value,

81
00:06:07,550 --> 00:06:13,830
if we trim that is equal to an empty string, then we certainly have an invalid input,

82
00:06:13,880 --> 00:06:22,760
though I also want to add another condition for which I want to check, so or if rating value is smaller

83
00:06:22,760 --> 00:06:25,370
than one and I can't compare it to a number here,

84
00:06:25,370 --> 00:06:30,470
it will hold a string but it will then try to coerce it to a number,

85
00:06:30,470 --> 00:06:36,050
alternatively of course to be super clear we can add a plus or parseInt here to convert this to a number

86
00:06:36,500 --> 00:06:41,420
and I will not add a check that checks where this can be converted to a number. You could do that as

87
00:06:41,420 --> 00:06:47,060
well, you could check if parseInt rating value returns not a number and then also throw an error here.

88
00:06:47,390 --> 00:06:54,380
I'll omit this check here, also because this type of input makes it hard to enter none number content, due

89
00:06:54,380 --> 00:06:59,420
to the way it's configured, at least on modern browsers. So I will omit this check but I want to check

90
00:06:59,420 --> 00:07:06,490
for numbers that are too small or that are too high, greater than five.

91
00:07:06,770 --> 00:07:15,140
So if any of that is the case, I will throw an alert and say Please enter valid values rating between

92
00:07:15,500 --> 00:07:19,970
1 and 5 and of course, you could also build your own modal, for that

93
00:07:19,970 --> 00:07:24,620
I'll just use that built-in alert and thereafter return so that we don't continue with the function

94
00:07:24,620 --> 00:07:31,250
execution. If we give that a quick try here and I reload and I try to click add here without anything

95
00:07:31,280 --> 00:07:31,670
entered,

96
00:07:31,670 --> 00:07:38,620
we get that alert here. If I enter a movie but I enter nothing for the URL, l still get an error, still

97
00:07:38,620 --> 00:07:46,750
get an error, entering six here, still get an error, entering -2 here, still get an error and entering

98
00:07:46,750 --> 00:07:48,190
a value between 1 and 5,

99
00:07:48,190 --> 00:07:49,160
like three,

100
00:07:49,330 --> 00:07:50,640
well now we don't get an error,

101
00:07:50,650 --> 00:07:54,700
so now is the part where we can continue and then use these results.

102
00:07:54,700 --> 00:07:59,580
Of course, you could also check if that really is a valid URL but that's something I don't really

103
00:07:59,620 --> 00:08:01,120
want to focus on right now,

104
00:08:01,120 --> 00:08:03,730
it's also not really the focus of this module.