1
00:00:00,060 --> 00:00:05,760
Now that we've got the Temel and CSFs out of the way, we can focus on JavaScript and completing our

2
00:00:05,760 --> 00:00:11,640
application, adding in the functionality and creating that dynamic effect that we can with JavaScript.

3
00:00:11,850 --> 00:00:15,150
And I know a lot of you are excited to get started with JavaScript.

4
00:00:15,360 --> 00:00:18,690
So the first thing that we need to do is select our elements.

5
00:00:18,900 --> 00:00:23,490
And these are the elements that we're going to be using throughout the application and we select them

6
00:00:23,490 --> 00:00:26,370
into an object format in JavaScript.

7
00:00:26,670 --> 00:00:32,730
So say, for instance, we've got a button and we potentially might have several different buttons that

8
00:00:32,730 --> 00:00:34,650
we want to apply the functionality to.

9
00:00:34,830 --> 00:00:40,570
So this is where we can select that button and apply our interaction to that button.

10
00:00:41,010 --> 00:00:49,830
So taking JavaScript variable, setting that up as BTM, we're going to select the document using query

11
00:00:49,830 --> 00:00:50,640
selector.

12
00:00:52,470 --> 00:00:57,720
And if we want to select all of them, we could do query, selecter all, so we're going to select all

13
00:00:57,720 --> 00:01:00,360
the elements that have a class of Motal.

14
00:01:00,480 --> 00:01:03,350
We could also select it via the button tag as well.

15
00:01:03,660 --> 00:01:08,990
And because it's a class, we have to put the dot in front of it just like we would with scissors.

16
00:01:09,240 --> 00:01:11,730
And that gives us the ability to select the button.

17
00:01:12,510 --> 00:01:19,170
And then once we have the button, you can console, logout that button, object to see to see what

18
00:01:19,170 --> 00:01:20,370
it looks like in the console.

19
00:01:20,670 --> 00:01:26,220
So refreshing that and because we only have the one button, we see it represented within the node list.

20
00:01:26,400 --> 00:01:31,050
And when we hover over it within the console, you see that it also lights up within our page.

21
00:01:31,290 --> 00:01:35,510
So we're ready to use that and we can loop through all of the buttons.

22
00:01:35,520 --> 00:01:40,080
So in case we've got more than one, we can do a for each set up a function.

23
00:01:40,200 --> 00:01:45,200
And what this function is going to do is it's going to allow us to add event listeners.

24
00:01:45,810 --> 00:01:53,910
So as we iterate through all of the elements that have a class of Motal, we can output those buttons

25
00:01:53,910 --> 00:01:57,570
as objects within the loop so we could use button.

26
00:01:57,730 --> 00:02:01,290
And now you can see that if we had more of them, there would be output here.

27
00:02:01,290 --> 00:02:06,360
And we get that essentially the button object that's represented within the DOM.

28
00:02:06,540 --> 00:02:10,780
That's also the element that we've got on our page with the class of modal.

29
00:02:11,130 --> 00:02:13,450
So now we can pass that into a function.

30
00:02:13,800 --> 00:02:18,810
So let's set up a function and we're going to say make click.

31
00:02:19,210 --> 00:02:23,130
That's going to be the function and we're passing in our button object.

32
00:02:23,400 --> 00:02:28,760
So the same object that we've got over here, we're passing into a function and that's create that function.

33
00:02:29,250 --> 00:02:35,820
So within this function, this is where we can create all of the element contents and make it interactive.

34
00:02:36,060 --> 00:02:42,510
And this way we can apply the same functionality in case we had different elements that we want to make

35
00:02:42,900 --> 00:02:45,060
and have them open up the models.

36
00:02:45,450 --> 00:02:51,150
So adding in the event listener using the JavaScript add event listener.

37
00:02:52,420 --> 00:02:58,120
And listening for a click event, we're going to invoke the functions, this can just be an anonymous

38
00:02:58,120 --> 00:02:58,980
function that will run.

39
00:02:59,380 --> 00:03:04,780
So once the button is clicked, for now, we're going to log out to the console just to make sure that

40
00:03:04,780 --> 00:03:08,180
everything is still OK and that we're able to click that button.

41
00:03:08,530 --> 00:03:16,480
So now we've taken that all of the elements with the class of mobile placed them into a node list represented

42
00:03:16,480 --> 00:03:18,040
by the variable button.

43
00:03:18,640 --> 00:03:21,460
And then we're looping through the variable button.

44
00:03:21,670 --> 00:03:26,090
And for each one of them were outputting each one of the items within the node list.

45
00:03:26,290 --> 00:03:31,060
So if we had more, we would output all of the different elements that we had within our node list.

46
00:03:31,480 --> 00:03:39,100
And then we're passing that element object to a function and using that same value, that same object

47
00:03:39,100 --> 00:03:40,850
value and adding an event listener.

48
00:03:40,870 --> 00:03:41,740
So let's try this.

49
00:03:41,740 --> 00:03:47,200
Now that when we press the button, we see that we've got Kallick showing up within our console and

50
00:03:47,200 --> 00:03:48,430
that's exactly what we want.

51
00:03:48,460 --> 00:03:50,180
So we're ready to move on to the next step.

52
00:03:50,560 --> 00:03:56,530
So go ahead and add the same functionality into your page and make your button clickable.