1
00:00:00,210 --> 00:00:01,600
Hello and welcome back.

2
00:00:01,620 --> 00:00:05,190
In this lesson, I'm going to show you how you can add an update classes.

3
00:00:05,400 --> 00:00:09,620
So so far, the updates that we've done has been within the style attribute.

4
00:00:09,840 --> 00:00:15,180
So when you open up your element, Inspecteur, in your browser, you can see that it's updating the

5
00:00:15,180 --> 00:00:20,460
background, color and the color to the different values that have been represented within the form,

6
00:00:20,610 --> 00:00:28,380
as well as we're updating the inner text that's contained within the input field and we're updating

7
00:00:28,380 --> 00:00:29,200
that as well.

8
00:00:29,460 --> 00:00:33,050
So in this lesson, we're going to add in a class.

9
00:00:33,630 --> 00:00:37,420
So let's create and we can just call this one bigger.

10
00:00:37,650 --> 00:00:39,570
So this is going to be a class called bigger.

11
00:00:39,900 --> 00:00:43,740
And when it's applied, it's going to have a really big font size.

12
00:00:43,920 --> 00:00:46,350
And we'll also update the font family.

13
00:00:46,800 --> 00:00:52,410
So whenever we add in this class and the objective is going to be to add and remove the class.

14
00:00:52,860 --> 00:01:01,290
So whenever we click the button, what we want to do is take that element and using select elements

15
00:01:01,290 --> 00:01:04,410
and then the class list value of the object.

16
00:01:04,770 --> 00:01:09,300
And what this is going to return back a list of all of the class that's available there.

17
00:01:09,330 --> 00:01:14,870
So if I was to output that, now you're going to see that we've got an empty class list.

18
00:01:15,360 --> 00:01:22,200
So what we want to do is we want to toggle that class and the class that we want to toggle is going

19
00:01:22,200 --> 00:01:23,340
to be named bigger.

20
00:01:23,820 --> 00:01:28,980
And I got to show you what's going to happen here, that every time I press that update button, it's

21
00:01:28,980 --> 00:01:30,090
toggling the class.

22
00:01:30,270 --> 00:01:34,710
So if you go back to the element, you're going to see that the class bigger now is added.

23
00:01:34,830 --> 00:01:37,080
And of course, you can see that visually as well.

24
00:01:37,260 --> 00:01:42,510
If I click it again, it's going to remove back that remove out that class will add it in.

25
00:01:42,750 --> 00:01:51,300
And now if I go in and if I type in that class list, so going into that select element and class list,

26
00:01:51,450 --> 00:01:57,330
you can see that what's available within the class list is we've got a number of classes and actually

27
00:01:57,330 --> 00:01:58,530
we only have this one class.

28
00:01:58,710 --> 00:02:00,030
So we have the class bigger.

29
00:02:00,270 --> 00:02:04,980
And what it's doing is every time the button is clicked, every time this event is triggered, it runs

30
00:02:04,980 --> 00:02:11,670
this block of code and it's triggering the toggling of the class so we can remove the class, we can

31
00:02:11,670 --> 00:02:15,950
add the class, or we can toggle the class using the class list method.

32
00:02:16,500 --> 00:02:18,900
So go ahead and try this this into your project.

33
00:02:19,140 --> 00:02:22,050
So there's more DOM element manipulation coming up.