1
00:00:01,030 --> 00:00:01,910
Welcome back.

2
00:00:01,930 --> 00:00:02,830
How's it going?

3
00:00:02,860 --> 00:00:08,380
Were you able to get your buttons clicking so that you click the button and you see something happening

4
00:00:08,380 --> 00:00:09,530
here within the console?

5
00:00:09,850 --> 00:00:14,460
So now you're ready to move on to the next step and this is where we're going to toggle that model.

6
00:00:14,590 --> 00:00:20,110
So the one that we created in the first lesson, all of that TEMEL and S.O.S styling it and we don't

7
00:00:20,110 --> 00:00:20,530
see it.

8
00:00:20,710 --> 00:00:25,060
So this lesson, I'm going to show you how you can toggle and show that element.

9
00:00:25,210 --> 00:00:31,570
And we saw within the success, when we add in a class in the model wrapper and if we add in another

10
00:00:31,570 --> 00:00:36,160
class of show model, what happens now is we see the model.

11
00:00:36,160 --> 00:00:40,600
So all we have to do is use JavaScript to toggle that value.

12
00:00:40,780 --> 00:00:44,930
And luckily for us, JavaScript has just that type of function.

13
00:00:45,280 --> 00:00:50,850
So we need to select the model object and we can use our query selector.

14
00:00:51,730 --> 00:00:59,590
So setting up our object in the same way that we selected the button, we can grab our model wrapper.

15
00:00:59,750 --> 00:01:01,300
You don't have to call it model wrapper.

16
00:01:01,570 --> 00:01:08,350
I just usually do that just so that it makes sense with in line with the classes using query selector

17
00:01:08,350 --> 00:01:15,400
and we only have one so we can use query selector all and selecting the element with a class of modal

18
00:01:15,400 --> 00:01:15,940
wrapper.

19
00:01:15,940 --> 00:01:17,820
And I know that turned out a little bit long.

20
00:01:18,130 --> 00:01:21,580
I can make this bigger for now and then we'll shrink it down when we test it out.

21
00:01:21,940 --> 00:01:26,090
So now we've got it within an object format and that means that we can use it.

22
00:01:26,350 --> 00:01:32,800
So going into when we make our click, we can update the class list and the class list.

23
00:01:32,800 --> 00:01:39,550
We know that this particular element will have a class of modal wrapper and we can also add to that

24
00:01:39,550 --> 00:01:40,360
class list.

25
00:01:40,580 --> 00:01:41,880
So that's what we're going to be doing.

26
00:01:42,220 --> 00:01:44,250
We can also toggle that if we want.

27
00:01:44,500 --> 00:01:50,470
So that gives us the ability to add a class, if it's not there, and remove a class if it's there.

28
00:01:50,470 --> 00:01:56,320
So that gives us that option to hide and show so we can do either one in this case where we can add

29
00:01:56,500 --> 00:02:02,290
and then remove it on the alternative or we can toggle it so it actually doesn't matter which one we

30
00:02:02,290 --> 00:02:02,620
use.

31
00:02:02,890 --> 00:02:08,170
And in this case, just to be precise, we wanted to add that model.

32
00:02:09,510 --> 00:02:16,320
Class, so the social model class, and now we can try it out, so opening it up and refreshing it in

33
00:02:16,320 --> 00:02:19,190
the page, we click it and boom, there we go.

34
00:02:19,200 --> 00:02:22,470
We've got our model showing up within our HTML.

35
00:02:22,950 --> 00:02:25,310
Now, one problem, no way to close it.

36
00:02:25,440 --> 00:02:27,830
So I show you how to do that in the upcoming lesson.

37
00:02:28,140 --> 00:02:29,970
So go ahead and add this in.

38
00:02:29,970 --> 00:02:34,710
And I know this was a relatively short lesson because we only had the one statement, but it's important

39
00:02:34,710 --> 00:02:38,790
to understand that you can control and manipulate elements on the page.

40
00:02:38,940 --> 00:02:46,110
And if we go to inspect right now, if we do an inspect on it so that the page source we can see within

41
00:02:46,110 --> 00:02:53,280
the page source, we're not we won't see that show model within that model rapper element.

42
00:02:53,640 --> 00:03:01,140
But when we go into inspect and this is the live version of it, and we open up our model wrapper,

43
00:03:01,140 --> 00:03:03,180
you see that show model has been added.

44
00:03:03,360 --> 00:03:05,330
So that's not there initially.

45
00:03:05,340 --> 00:03:08,160
And we can see that it's not there initially.

46
00:03:08,160 --> 00:03:12,040
And when I do press it, it JavaScript adds in the short middle class.

47
00:03:12,360 --> 00:03:13,970
So go ahead and try this out for yourself.