1
00:00:02,310 --> 00:00:04,440
So let's work on these choose plan buttons

2
00:00:04,460 --> 00:00:11,460
now. For that, we need to manipulate the styles but not by default when this Javascript code first runs

3
00:00:11,460 --> 00:00:17,790
but when an event occurs and for that, we need to add a so-called event listener to the HTML element we

4
00:00:17,790 --> 00:00:19,710
want to listen to.

5
00:00:19,710 --> 00:00:21,710
That's not the backdrop in our case,

6
00:00:21,870 --> 00:00:24,290
that is the choose plan button instead,

7
00:00:24,570 --> 00:00:33,630
so our button down there. Now that of course means that we somehow need to select this button and for

8
00:00:33,630 --> 00:00:39,630
that, I'll go back to my Javascript code and call this select plan button,

9
00:00:39,660 --> 00:00:45,450
you can name this variable whatever you want, it will hold a reference to these buttons.

10
00:00:45,450 --> 00:00:47,230
So for that, we again use document

11
00:00:47,310 --> 00:00:51,420
but now I need to register three event listeners, one to each button.

12
00:00:51,450 --> 00:00:57,630
So I actually want to select all the buttons and I already told you that for this, we can use query selector

13
00:00:57,870 --> 00:01:07,680
all. Now query selector all still takes a string as an argument which allows us to define a CSS selector

14
00:01:08,190 --> 00:01:14,730
and if we have a look at our HTML code, we see that we're interested in a button element but not necessarily

15
00:01:14,730 --> 00:01:16,820
in every button on our page

16
00:01:16,950 --> 00:01:22,840
but in a button which is inside of, let's say an element with the plan class.

17
00:01:23,190 --> 00:01:30,150
So therefore, we can use a combinator here and say select any element which is inside of a plan class

18
00:01:30,210 --> 00:01:33,440
element and which is in turn a button element,

19
00:01:33,450 --> 00:01:40,410
this will give us a list of all the buttons in our plans and we can again see this by using console dir

20
00:01:40,620 --> 00:01:45,970
select plan button or buttons is a better name actually because it's more than one

21
00:01:46,080 --> 00:01:51,750
and if I now reload the page and go back to the console in the developer tools, we see we've got a node

22
00:01:51,750 --> 00:01:53,920
list with three buttons indeed,

23
00:01:53,940 --> 00:01:56,010
so that's looking good.

24
00:01:56,010 --> 00:02:00,000
Now with that, we can add our event listener to these buttons.

25
00:02:00,040 --> 00:02:01,490
Now we got an array,

26
00:02:01,500 --> 00:02:04,350
I actually need to loop through these buttons,

27
00:02:04,350 --> 00:02:09,350
I need to execute an action for every element in that array. Now

28
00:02:09,360 --> 00:02:11,700
for that, we can use a for loop,

29
00:02:11,700 --> 00:02:18,570
now that's just a construct in Javascript which allows us to repeat code and we need to pass three arguments

30
00:02:18,570 --> 00:02:19,970
to the for loop here.

31
00:02:20,100 --> 00:02:27,920
The first is an iteration variable, a temporary variable which we use to keep track about how often we executed

32
00:02:27,930 --> 00:02:31,020
the loop and how often we still have to execute it

33
00:02:31,080 --> 00:02:37,170
and typically, you use i here for iteration but you can name this whatever you want and we set an initial

34
00:02:37,170 --> 00:02:38,500
value of 0.

35
00:02:38,700 --> 00:02:43,850
Keep in mind that in the select plans buttons list, the first element had an index of zero,

36
00:02:43,860 --> 00:02:48,700
so this will help us selecting that first element for the first run of this loop.

37
00:02:49,290 --> 00:02:51,110
Then we add a semi-colon

38
00:02:51,270 --> 00:02:54,180
and next we enter the condition for this loop,

39
00:02:54,180 --> 00:02:56,930
so how long should this loop keep on running.

40
00:02:57,090 --> 00:03:04,450
It should keep on running as long as i is smaller then select plan buttons length,

41
00:03:04,670 --> 00:03:09,510
length is a special property which simply tells us how many elements we got.

42
00:03:09,670 --> 00:03:15,840
Now we will have three elements and therefore, this will keep on running until it is two. For two,

43
00:03:15,840 --> 00:03:17,270
it will still be executed

44
00:03:17,340 --> 00:03:24,410
but once i reaches three, it will not execute the code again because three is not smaller than three.

45
00:03:24,420 --> 00:03:28,410
Now we need to add a third argument separated with another semi-colon

46
00:03:28,530 --> 00:03:34,510
and this is essentially just the code which should run whenever we finished one loop iteration,

47
00:03:34,620 --> 00:03:42,630
it should increment i by 1 which we simply do by typing i++, this will add 1 to i after

48
00:03:42,750 --> 00:03:44,600
each run through that loop.

49
00:03:44,700 --> 00:03:51,330
Then we add curly braces and inside of that, we add the code we want to execute for each run

50
00:03:51,840 --> 00:03:59,820
and there, I want to access select plant buttons for my element i with squared brackets, we access a certain

51
00:03:59,820 --> 00:04:01,620
element in that array

52
00:04:01,920 --> 00:04:05,920
and now we can call the special add event listener method.

53
00:04:06,300 --> 00:04:08,460
Now here we add two arguments,

54
00:04:08,460 --> 00:04:14,530
the first is the event we want to listen to, in our case, this is the click event.

55
00:04:14,580 --> 00:04:19,620
The second argument is the code we want to execute whenever this event occurs

56
00:04:19,680 --> 00:04:22,520
and for that, we can use a function.

57
00:04:22,620 --> 00:04:28,630
A function is simply a construct of code which won't run immediately when this file is getting executed

58
00:04:28,950 --> 00:04:30,510
but only when it's called

59
00:04:30,600 --> 00:04:34,320
and here our function will get called when the click occurs.

60
00:04:34,320 --> 00:04:39,660
We are actually defining a so-called anonymous function here because we're not giving it a special name

61
00:04:39,870 --> 00:04:43,290
because we're never calling it from anywhere else in our code.

62
00:04:43,290 --> 00:04:46,000
A function is defined with the function keyword,

63
00:04:46,110 --> 00:04:51,630
then parentheses and then curly braces which hold the content of that function.

64
00:04:51,660 --> 00:04:57,010
Now in that function, we define the code which should run when we click such a button

65
00:04:57,210 --> 00:05:02,890
and now it's inside of dir that we actually want to show the backdrop and the modal.

66
00:05:03,020 --> 00:05:05,330
Now for that, we also need to select the modal.

67
00:05:05,460 --> 00:05:11,970
Now in the index.html file, we see the modal has the class modal, so let's also get access to that with

68
00:05:11,970 --> 00:05:15,100
another variable, modal document and

69
00:05:15,100 --> 00:05:16,350
now query selector

70
00:05:16,410 --> 00:05:24,690
because not all, we only want to get the first and only modal we got, selecting it by the modal CSS class

71
00:05:25,560 --> 00:05:35,940
and therefore in this function, we can now access modal style and then display and set it to block, to

72
00:05:35,980 --> 00:05:42,460
show it as a block element and not none which will not show it. I'll duplicate this to also change the

73
00:05:42,460 --> 00:05:44,390
style of the backdrop,

74
00:05:44,440 --> 00:05:50,530
now this should also be set to block when we click the button. With that, make sure to save all files and

75
00:05:50,530 --> 00:05:51,880
reload your page

76
00:05:51,970 --> 00:05:56,320
and now if you click one of these buttons, it will actually show the modal.

77
00:05:56,350 --> 00:05:58,620
Now we can't remove the modal yet,

78
00:05:58,650 --> 00:06:01,330
this is something you can practice in the next lecture

79
00:06:01,420 --> 00:06:03,410
but this is a great first step.