1 00:00:00,090 --> 00:00:01,230 Welcome back. 2 00:00:01,260 --> 00:00:05,370 In this video, let's work with CSIS methods. 3 00:00:05,400 --> 00:00:10,980 That is class list, dot, add, remove or toggle. 4 00:00:11,160 --> 00:00:17,670 Like I said, this is one of the commonly used method when it comes to domain manipulation. 5 00:00:17,670 --> 00:00:20,970 So please pay attention as we move on. 6 00:00:21,060 --> 00:00:27,960 So let me bring this topic down here and now put it here. 7 00:00:27,990 --> 00:00:35,130 Let me give it beautiful comment as that and down here is also start. 8 00:00:35,130 --> 00:00:37,140 So now back to business. 9 00:00:37,140 --> 00:00:42,690 So why do we need this method and what are some of the use cases here? 10 00:00:42,870 --> 00:00:53,550 This method is going to allow us to add or remove elements dynamically using JavaScript where we could 11 00:00:53,550 --> 00:01:00,740 still achieve the same format by using this format, by overwriting the properties, using this type 12 00:01:00,750 --> 00:01:01,560 properties. 13 00:01:01,950 --> 00:01:08,730 But let's say that our in real world applications always we have separation of consent. 14 00:01:08,940 --> 00:01:17,760 So let's say that we want to add our custom CSS that we have declared inside this file to a specific 15 00:01:17,760 --> 00:01:19,950 element inside our HTML. 16 00:01:19,980 --> 00:01:26,070 How are we going to use JavaScript to take this CSS and add it to the element that we want? 17 00:01:26,280 --> 00:01:30,210 That's one good thing about the class method. 18 00:01:30,390 --> 00:01:33,420 For example, dot, add, remove or toggle. 19 00:01:33,690 --> 00:01:35,820 So let's see how we are going to achieve this. 20 00:01:35,820 --> 00:01:45,270 So let's say that we have a class core error and for this class of error we will say the color is red. 21 00:01:45,270 --> 00:01:51,360 So let's see how we can use JavaScript to add this specific class to the element. 22 00:01:51,360 --> 00:01:58,950 I want to use JavaScript to add this particular class to any of the elements of my page that I want. 23 00:01:59,130 --> 00:02:08,880 It means that if I add, let's say, a class, so let me add H to let's say H to here and let me call 24 00:02:08,880 --> 00:02:10,650 this one as error. 25 00:02:11,190 --> 00:02:11,620 Let me see. 26 00:02:11,640 --> 00:02:12,690 Network error. 27 00:02:13,320 --> 00:02:16,650 Network error. 28 00:02:16,920 --> 00:02:17,460 Okay. 29 00:02:17,490 --> 00:02:22,890 Now I want to give a color of red to this network error. 30 00:02:22,920 --> 00:02:24,690 That's what we have here. 31 00:02:24,750 --> 00:02:36,960 So as soon as I add class for error because I have linked up my CSS is going to be as broad as red. 32 00:02:36,960 --> 00:02:38,400 But I don't want that. 33 00:02:38,400 --> 00:02:43,860 I want JavaScript to update without me adding it in line as that. 34 00:02:43,860 --> 00:02:45,150 So I remove that. 35 00:02:45,150 --> 00:02:51,540 So let's see how we're going to use JavaScript to add this CSS to this selected element. 36 00:02:51,540 --> 00:03:00,690 So the first step is I need to select this particular element so I can select using the tag name code 37 00:03:00,930 --> 00:03:08,910 two or better, so I can give it an ID of a different ID or a class so that I can target this particular 38 00:03:08,910 --> 00:03:09,300 class. 39 00:03:09,300 --> 00:03:13,500 So let's use the tag name for simplicity's sake. 40 00:03:13,500 --> 00:03:15,720 So let's go ahead and do that. 41 00:03:16,020 --> 00:03:24,990 So let's start with the class list, dot add, class list, dot add. 42 00:03:25,110 --> 00:03:30,330 So this method is used to add a class to an element. 43 00:03:30,330 --> 00:03:33,510 So first is let's select the elements. 44 00:03:33,510 --> 00:03:42,360 So step one is select the element so we can do this in so many ways. 45 00:03:42,360 --> 00:03:54,210 So going to be as hidden element is equal to so let's add a class or ID to the element, make it pretty 46 00:03:54,210 --> 00:03:54,900 easy. 47 00:03:55,080 --> 00:04:01,170 So here is going to be let's give it an ID of say heading as that. 48 00:04:01,170 --> 00:04:12,600 So here let's select that using the get element by ID document dot gets element by ID, then I'll pass 49 00:04:12,600 --> 00:04:14,190 in the ID. 50 00:04:14,280 --> 00:04:21,570 So always make sure that the element has been selected by console.log in it and let's see if everything 51 00:04:21,600 --> 00:04:22,500 is perfect. 52 00:04:22,680 --> 00:04:26,820 So let me check the console and indeed have selected that. 53 00:04:26,940 --> 00:04:32,520 So after selecting then we can go ahead and add class to it. 54 00:04:32,790 --> 00:04:35,220 So here, come up here. 55 00:04:35,220 --> 00:04:40,290 The next step is add CSS class. 56 00:04:41,010 --> 00:04:47,370 Remember the class method used to add only class but not an ID. 57 00:04:47,730 --> 00:04:49,050 So here we go. 58 00:04:49,080 --> 00:04:56,460 I would take my heading element then dot class list and we have the three methods. 59 00:04:56,460 --> 00:04:59,940 One is add and remove and. 60 00:05:00,060 --> 00:05:02,820 And they toggle this one. 61 00:05:02,820 --> 00:05:12,810 So let's start with the ADD method then I won't add a class of error which is inside my CSS. 62 00:05:12,960 --> 00:05:21,660 So if I save this one, it will see that now I have this particular element being read and we can also 63 00:05:21,660 --> 00:05:23,370 check inside the console. 64 00:05:23,370 --> 00:05:29,820 So click on that and click on Element and let's locate the which elements. 65 00:05:29,820 --> 00:05:30,750 That is a network. 66 00:05:30,750 --> 00:05:37,680 Yeah, if we see that for this one, we have added a dynamic class called error. 67 00:05:37,920 --> 00:05:39,750 This what we did it manually. 68 00:05:39,750 --> 00:05:40,320 Right. 69 00:05:40,320 --> 00:05:47,580 And you can see that we've added a class called error by using JavaScript and this is the CSS properties 70 00:05:47,580 --> 00:05:48,480 we added. 71 00:05:48,480 --> 00:05:54,870 So anything that I'll add to the CSS property here, for example, font size or weight lists is going 72 00:05:54,870 --> 00:05:55,780 to be for the PC. 73 00:05:56,040 --> 00:05:57,960 Is it going to be affected? 74 00:05:57,960 --> 00:06:05,250 And see that when I check the heading, this is my heading where I added the class of error and you 75 00:06:05,250 --> 00:06:12,180 can see that for the CSS, I have all these properties being applied to that using JavaScript with the 76 00:06:12,180 --> 00:06:13,800 help of the DOM. 77 00:06:13,830 --> 00:06:19,020 That is about the class add method. 78 00:06:19,020 --> 00:06:22,200 So we can also remove the class. 79 00:06:22,200 --> 00:06:30,030 We can say that remove the class so we can do so using the class. 80 00:06:31,410 --> 00:06:35,820 Lest dirt remove method, as simple as that. 81 00:06:35,820 --> 00:06:36,690 So here we go. 82 00:06:36,840 --> 00:06:40,140 So I would take my hidden elements. 83 00:06:40,170 --> 00:06:43,190 Dirt, classless, dirt. 84 00:06:43,200 --> 00:06:48,120 Remove, remove, wart, remove the class of error. 85 00:06:48,620 --> 00:06:51,850 You can see that it has removed the CSS properties. 86 00:06:51,870 --> 00:06:57,960 That is it about the class dot remove and for the toggle that one. 87 00:06:57,990 --> 00:07:03,510 Unless we work with events so that we have a button to click to toggle. 88 00:07:03,540 --> 00:07:07,140 If I click this the first time I want to add a color. 89 00:07:07,170 --> 00:07:10,030 When I click again, I want to remove the color. 90 00:07:10,050 --> 00:07:10,810 That's all. 91 00:07:10,820 --> 00:07:11,820 What about a toggle? 92 00:07:11,820 --> 00:07:18,840 But because we haven't done the event of which we are going to cover in the upcoming ones, let's reserve 93 00:07:18,840 --> 00:07:19,990 the toggle method. 94 00:07:20,010 --> 00:07:23,580 As we move on, I will introduce to you by the same concept. 95 00:07:23,580 --> 00:07:30,420 Just add toggle and the CSS that I wanted to go and add event listener to it and you are good to go. 96 00:07:30,690 --> 00:07:36,630 The next video let's work with how we can remove content from the page looking at this one. 97 00:07:36,870 --> 00:07:38,040 We see that right now. 98 00:07:38,040 --> 00:07:39,330 We can add this. 99 00:07:39,330 --> 00:07:41,570 We can add properties to this particular element. 100 00:07:41,580 --> 00:07:48,870 What about if I want to remove this text, let's say network error here away or this one, how are we 101 00:07:48,870 --> 00:07:49,730 going to do it? 102 00:07:49,740 --> 00:07:53,220 That is what we are going to do in the next video.