1
00:00:08,060 --> 00:00:15,050
Hey, everyone, in the beginning of this section, we've learned how to change the success of elements

2
00:00:15,050 --> 00:00:17,470
by using the success method.

3
00:00:17,660 --> 00:00:19,520
So this is how we use it.

4
00:00:19,700 --> 00:00:27,710
We just call the method and then we pass the property and the value we want to apply in this case for

5
00:00:27,710 --> 00:00:29,480
setting the display to Tanon.

6
00:00:29,720 --> 00:00:34,210
We also learn that we can simplify it by using the hide method.

7
00:00:34,550 --> 00:00:40,310
But what happens if we want to set multiple properties at the same time?

8
00:00:40,790 --> 00:00:48,050
If that's the case, maybe it's better to add a class so then you can set all the properties in success

9
00:00:48,230 --> 00:00:51,330
and then just add the class to an element.

10
00:00:51,500 --> 00:00:56,880
So here we have this paragraph and this paragraph has the class of normal.

11
00:00:57,350 --> 00:00:59,080
So let's inspect this.

12
00:00:59,630 --> 00:01:00,560
So here it is.

13
00:01:00,770 --> 00:01:05,060
It has a class of normal and the is example paragraph.

14
00:01:05,300 --> 00:01:10,760
So if we get this paragraph and add a class of styling.

15
00:01:11,910 --> 00:01:18,400
Let's see what happens if we do this, as you can see, we completely changed this paragraph.

16
00:01:18,660 --> 00:01:26,710
This is because on my access file, I have a class called Styling where I set all these different styles.

17
00:01:27,060 --> 00:01:29,610
So now how can we do this with Jay Quarrie?

18
00:01:29,880 --> 00:01:32,340
Let's put these buttons to work.

19
00:01:32,940 --> 00:01:33,600
So.

20
00:01:34,800 --> 00:01:38,850
The paragraph we want to change is called example paragraph.

21
00:01:40,620 --> 00:01:42,480
Let's take this to the code.

22
00:01:44,480 --> 00:01:53,600
And then the buttons are the ad class remove class and torgau class, so these are the methods we are

23
00:01:53,600 --> 00:01:54,440
going to use.

24
00:01:54,860 --> 00:01:59,150
We can add or remove class or just toggle classes.

25
00:01:59,390 --> 00:02:06,560
In this case, it can be very useful because we don't have to test if an element has a class or not,

26
00:02:06,800 --> 00:02:10,310
something that would have to be done in pure JavaScript.

27
00:02:10,730 --> 00:02:13,880
But with J Querrey, we don't have to worry about this.

28
00:02:14,120 --> 00:02:19,820
We can just use the toggle class method as we are going to see in a moment.

29
00:02:20,130 --> 00:02:26,270
So let's get started with the ad class and remove class to going to Visual Studio Code.

30
00:02:26,690 --> 00:02:29,330
Let's start with the ad class.

31
00:02:29,330 --> 00:02:34,460
So I'm just going to copy some click event from up here.

32
00:02:34,640 --> 00:02:35,960
This one is fine.

33
00:02:38,780 --> 00:02:45,830
All right, so now the button that we want to set the click event to is called and.

34
00:02:47,180 --> 00:02:55,340
Class, it has an idea of add class and when we click this button, we just want to get this example

35
00:02:55,340 --> 00:02:56,180
paragraph.

36
00:02:57,620 --> 00:02:59,900
Which is an ID like this.

37
00:03:01,450 --> 00:03:06,130
And then we are going to use the add class method.

38
00:03:07,430 --> 00:03:13,550
And then the argument we pass here is the class we want to add in this case, the name of the class

39
00:03:13,550 --> 00:03:15,020
is styling.

40
00:03:17,870 --> 00:03:21,500
Now, let's do the same thing for the remove class button.

41
00:03:22,990 --> 00:03:26,830
So we have a button called Remove Class.

42
00:03:27,750 --> 00:03:30,390
And in this case, we just want to remove.

43
00:03:31,640 --> 00:03:38,210
The style in class, so let's save this, let's see what happens, refreshing the page.

44
00:03:39,370 --> 00:03:43,120
Now it's back to normal again if I click add class.

45
00:03:44,050 --> 00:03:50,390
You can see that we can completely change this element just by adding a class if I click here again.

46
00:03:50,560 --> 00:03:51,270
That's fine.

47
00:03:51,580 --> 00:03:53,760
Jay Quarrie doesn't care.

48
00:03:53,770 --> 00:03:56,310
It's just not going to do anything.

49
00:03:56,650 --> 00:04:00,180
And the same thing for the remove now that it has this class.

50
00:04:00,190 --> 00:04:03,820
If I click here, we can see that the class has been removed.

51
00:04:04,210 --> 00:04:11,230
And when we click here again, just nothing is going to happen so we can keep playing with this.

52
00:04:11,560 --> 00:04:17,610
But now, instead of doing this with two buttons and sometimes one or the other are not going to work,

53
00:04:17,620 --> 00:04:21,660
so if I already have the class, then this button does not work anymore.

54
00:04:22,060 --> 00:04:23,530
We don't need to do this.

55
00:04:23,860 --> 00:04:30,810
We can actually use just one button because there's also the toggle class method.

56
00:04:31,770 --> 00:04:33,630
So let's go back there and.

57
00:04:35,400 --> 00:04:38,490
We have a button called Targo Class.

58
00:04:40,970 --> 00:04:42,320
So here, Torgau.

59
00:04:46,710 --> 00:04:54,750
Refreshing the page, and now this method is cool because it's testing if the element has the class

60
00:04:54,750 --> 00:04:58,620
or not, if the element has the class, it is going to remove it.

61
00:04:58,830 --> 00:05:02,370
If the element does not have the class, it is going to add it.

62
00:05:02,670 --> 00:05:04,020
So this is pretty cool.

63
00:05:04,770 --> 00:05:09,810
And as you can see, we only need one button to keep tackling this.

64
00:05:10,350 --> 00:05:12,060
So that was all that I wanted to say.

65
00:05:12,060 --> 00:05:18,120
For now, in the next few lessons, we are going to go back to this and do a cool example.

66
00:05:18,330 --> 00:05:19,710
I'll see you in the next video.