1
00:00:00,090 --> 00:00:06,570
This lesson will demonstrate how you can add a class and remove a class from an element.

2
00:00:07,610 --> 00:00:15,440
We're going to first create a class, so setting up a border for this class, making it a red border,

3
00:00:16,160 --> 00:00:21,990
and we'll update also the color of the inner element text to be read as well.

4
00:00:22,340 --> 00:00:28,940
I'm also going to do a quick update to this value so that we have Barch instead of dog.

5
00:00:29,360 --> 00:00:36,200
And I'm going to also update this one here so that everything is consistent with the names here that

6
00:00:36,200 --> 00:00:37,550
we're using in the MP threes.

7
00:00:38,420 --> 00:00:42,580
Next, let's set up and update setting, adding our style.

8
00:00:43,310 --> 00:00:48,170
So create a style or we can do add style, lower animal.

9
00:00:49,310 --> 00:00:54,440
So we're sending over the different styles that we want to add and which elements we want to add that

10
00:00:54,440 --> 00:00:55,040
style to.

11
00:00:55,490 --> 00:01:02,000
Now, using the function add style, we need to get the name of the element that we want to add the

12
00:01:02,000 --> 00:01:02,540
style to.

13
00:01:03,140 --> 00:01:08,210
And this is going to match with the element with the class of the name that we want to add the style

14
00:01:08,210 --> 00:01:08,450
to.

15
00:01:09,080 --> 00:01:12,860
Let's use query selector to select an active element.

16
00:01:13,250 --> 00:01:18,370
So active elements and we're going to use document query selector.

17
00:01:18,560 --> 00:01:24,050
And this is one of the nice things about Querrey selector is we can make this fully dynamic so we know

18
00:01:24,050 --> 00:01:31,160
that classes need to have the dot in front of it and all we need is a string value for the name so we

19
00:01:31,160 --> 00:01:32,990
can do it within this type of format.

20
00:01:33,200 --> 00:01:36,380
And as you can see, we are still passing over the name.

21
00:01:36,560 --> 00:01:43,040
So if I console log out the value of name, you're going to see that this is going to be the name of

22
00:01:43,040 --> 00:01:46,340
the element, inner turmoil of the element that was clicked.

23
00:01:46,670 --> 00:01:51,650
And right now, for now, I'm going to commentate the making of the sound so we see that we get lion

24
00:01:51,650 --> 00:01:53,600
cougar bark and so on.

25
00:01:53,600 --> 00:01:55,400
So that's coming in from ad style.

26
00:01:55,760 --> 00:02:01,790
And that also means that we can select that activate and we're going to output that into the console

27
00:02:01,790 --> 00:02:02,090
now.

28
00:02:02,270 --> 00:02:12,140
So whatever that element is, and this is dependent on having the class with the same content as the

29
00:02:12,140 --> 00:02:13,820
inner text as well.

30
00:02:14,210 --> 00:02:18,530
So you can see when you click it, we're selecting the right element that's been clicked.

31
00:02:19,580 --> 00:02:25,160
So that gives us the ability to update that particular object because now we've got it in.

32
00:02:26,650 --> 00:02:32,500
Variable called active class, that's where our object is sitting and we can do something with this

33
00:02:32,500 --> 00:02:37,300
active element where we can get the class list.

34
00:02:38,100 --> 00:02:45,750
And we can add to the class list and what we want to add is active to that class list, so let's try

35
00:02:45,750 --> 00:02:46,170
that out.

36
00:02:46,180 --> 00:02:48,290
So now when I click it, you see they go red.

37
00:02:49,080 --> 00:02:52,880
Next thing that we want to do is we actually don't want them to stay red.

38
00:02:52,920 --> 00:02:56,540
We want them to actually turn back to its original color.

39
00:02:56,880 --> 00:03:03,960
And this is where we can use another JavaScript method called Septime Timeout.

40
00:03:04,200 --> 00:03:11,400
And what this does is this executes a snippet of code after a specified delay and this delay is specified

41
00:03:11,400 --> 00:03:12,440
within milliseconds.

42
00:03:12,750 --> 00:03:14,130
So using function.

43
00:03:15,900 --> 00:03:26,400
We can get that active element object and using class list, and just as we added a class, we can now

44
00:03:26,400 --> 00:03:30,400
remove a class and the class that we want to remove is active.

45
00:03:31,740 --> 00:03:37,200
So what's going to happen here is that we're going to run this block of code and we need to specify

46
00:03:37,620 --> 00:03:42,480
in what time of what time period we're going to run that block a code so we can do it within two hundred

47
00:03:42,480 --> 00:03:43,270
milliseconds.

48
00:03:44,010 --> 00:03:47,610
So now let's try that out so we'll see that we can click it.

49
00:03:47,610 --> 00:03:50,960
It goes red and then it turns back to its original color.

50
00:03:51,240 --> 00:03:53,420
And when you inspect that element.

51
00:03:53,820 --> 00:03:57,850
So going into our HTML and make this a little bit bigger so we can better see it.

52
00:03:58,170 --> 00:04:04,170
So watch when I click the element, you see it gets that active class added and that's only for two

53
00:04:04,170 --> 00:04:05,250
hundred milliseconds.

54
00:04:05,250 --> 00:04:07,320
So it's a fifth of a second there.

55
00:04:07,320 --> 00:04:08,280
So it's rather quick.

56
00:04:08,400 --> 00:04:14,190
But you see that those elements are getting added in and that class is being added in updating those

57
00:04:14,190 --> 00:04:14,660
elements.

58
00:04:15,000 --> 00:04:22,590
So go ahead and try this one out for yourself where you're adding classes and also try out that set

59
00:04:22,590 --> 00:04:24,980
time out method in JavaScript.

60
00:04:25,260 --> 00:04:32,340
So try both of these new methods out, adding classes, removing classes and then setting a timeout.