1 00:00:00,300 --> 00:00:07,950 OK, guys, in this video, we will talk about how we can add, remove and tumble clashes, the first 2 00:00:07,950 --> 00:00:17,640 thing we will do right here is to add one and type something inside like this as either one. 3 00:00:18,510 --> 00:00:24,300 And this a different way to add tile inside the estimated five page title. 4 00:00:25,380 --> 00:00:30,570 And then here we can make this one to be having class at one. 5 00:00:31,600 --> 00:00:36,610 Or just class, because we will use class to OK. 6 00:00:37,150 --> 00:00:42,100 As for this part, what we can do is to add some style like class. 7 00:00:44,380 --> 00:00:47,140 Let's make this to be a one one. 8 00:00:47,260 --> 00:00:58,090 OK, let's give it a color of red, the background color of the black and the padding so we can just 9 00:00:58,090 --> 00:00:59,680 go and reload. 10 00:01:00,100 --> 00:01:01,070 OK, that's good. 11 00:01:02,050 --> 00:01:03,850 We can now add a script. 12 00:01:04,600 --> 00:01:06,090 What we want to do here. 13 00:01:06,310 --> 00:01:14,830 We wanted you to lead that class of class one using the JavaScript we can make here, document DOT choir 14 00:01:14,830 --> 00:01:25,060 with a lecture and then we will choose the class one and then side here we will add something which 15 00:01:25,060 --> 00:01:26,170 is called class. 16 00:01:26,300 --> 00:01:37,990 This list is all of the classes inside the style and then here we will use added remove and Tuggle. 17 00:01:38,000 --> 00:01:45,070 But here we want to weave a class so we will use remove, we can type here, remove and then up in the 18 00:01:45,430 --> 00:01:49,540 end and then inside we will remove a class. 19 00:01:49,720 --> 00:01:51,530 What class do you want to remove? 20 00:01:51,700 --> 00:01:53,650 I want to remove that class. 21 00:01:53,650 --> 00:01:57,990 One, we can go and reload. 22 00:01:58,360 --> 00:02:01,270 So now we have deleted this class. 23 00:02:01,990 --> 00:02:03,100 OK, that's good. 24 00:02:03,490 --> 00:02:08,650 Let's talk now about how we can add a class for the JavaScript. 25 00:02:09,070 --> 00:02:15,270 We can just go here and see this one from here, OK? 26 00:02:15,730 --> 00:02:20,290 And then we can go here instead of removed. 27 00:02:20,500 --> 00:02:24,720 We can use act and then we can go to the Web page. 28 00:02:25,000 --> 00:02:28,260 But first, let's leave this slide so we can see what we have. 29 00:02:28,870 --> 00:02:30,130 We have this here. 30 00:02:30,550 --> 00:02:39,370 But when I get this back to its original position and then go and reload the page, we just centered 31 00:02:39,370 --> 00:02:41,760 around this part of the problem. 32 00:02:43,060 --> 00:02:47,500 And it's, uh, I think we have something wrong here. 33 00:02:49,690 --> 00:02:51,250 What's the problem with the part? 34 00:02:56,270 --> 00:03:00,470 We have something wrong here, so we need to check this problem right here. 35 00:03:01,130 --> 00:03:02,850 OK, here we got the problem. 36 00:03:02,870 --> 00:03:08,090 The problem is with this, we don't have a class here. 37 00:03:08,090 --> 00:03:10,610 So this is defined. 38 00:03:10,940 --> 00:03:14,970 Let's just make this one, three, two, one go before and reload. 39 00:03:15,470 --> 00:03:18,110 So now we've got this style. 40 00:03:18,740 --> 00:03:22,700 OK, let's make it for the click function. 41 00:03:23,070 --> 00:03:34,250 We can just go to this part and we can make a document that requires a lecture to be for each one. 42 00:03:34,520 --> 00:03:40,850 And then here we can make an event left corner for the click function. 43 00:03:41,030 --> 00:03:49,940 Here we got mouse on mouse, enter max leave by people just you click and then here we will add a function 44 00:03:50,600 --> 00:03:51,470 like that. 45 00:03:51,500 --> 00:04:01,730 OK, and then we can covid after being thighed, but we can give it here a class of the class one and 46 00:04:01,730 --> 00:04:03,110 then we can do this part. 47 00:04:04,880 --> 00:04:14,570 OK, we can up this and then at this part we can try the two so we can make sure no, we get something 48 00:04:14,570 --> 00:04:15,310 wrong with this bird. 49 00:04:15,370 --> 00:04:18,190 So what's the problem here? 50 00:04:19,530 --> 00:04:21,750 I want to be having a class of two. 51 00:04:23,420 --> 00:04:30,680 Yes, yes, this to be having that background of red and the color like this, the problem. 52 00:04:31,290 --> 00:04:38,780 OK, now basket after this part, what we can do is to go here. 53 00:04:38,780 --> 00:04:40,160 We can apply this again. 54 00:04:41,000 --> 00:04:43,670 OK, we can just scroll down. 55 00:04:43,880 --> 00:04:48,410 I want to click on each one to add the class of two. 56 00:04:48,680 --> 00:04:52,880 We can make this one to be one, OK? 57 00:04:53,150 --> 00:04:56,090 And I want to move that class of one. 58 00:04:56,390 --> 00:05:04,610 Let's start with deleting that class of one and go here and reload when you click on add to one. 59 00:05:04,910 --> 00:05:07,520 So here I have a class of class two. 60 00:05:07,910 --> 00:05:11,990 Let's try to apply it for the remove method. 61 00:05:12,380 --> 00:05:15,140 We can just go here instead of add. 62 00:05:15,140 --> 00:05:20,300 We will use Removeable and this we will remove that class one. 63 00:05:20,750 --> 00:05:29,720 We can just go here and add class one and then here we can reload. 64 00:05:30,230 --> 00:05:31,760 So here we got the header one. 65 00:05:32,780 --> 00:05:42,820 OK, we can remove that class of one from here because we don't want the class when we click here. 66 00:05:43,100 --> 00:05:45,680 So now we have deleted this class. 67 00:05:46,520 --> 00:05:53,300 OK, after this part let's remove the class of one and add the class of two. 68 00:05:58,530 --> 00:06:04,970 When we go and reload, we have the last one, but when we click here, we got that class, too. 69 00:06:05,460 --> 00:06:07,690 But what if I want to? 70 00:06:08,010 --> 00:06:09,840 What if I want to click back? 71 00:06:09,870 --> 00:06:12,640 So I have that class one game. 72 00:06:13,270 --> 00:06:15,750 There is something which is called Tuggle. 73 00:06:15,930 --> 00:06:18,180 And this also will be better than you. 74 00:06:18,480 --> 00:06:19,350 Remote class. 75 00:06:20,340 --> 00:06:27,300 I don't want to get back every time to the TSA to make sure that it's already having the class of class 76 00:06:27,300 --> 00:06:28,000 one or two. 77 00:06:28,500 --> 00:06:33,750 This will be unlike the thing we can use here is that Tuggle method. 78 00:06:34,030 --> 00:06:39,240 And I'm going to show you what that toggle is we can do like this one right here. 79 00:06:40,920 --> 00:06:48,090 So what is the toggle, the taco maze, if here is that tag, the X1 tag. 80 00:06:48,540 --> 00:06:51,720 If it has the class one, I will remove it. 81 00:06:52,020 --> 00:06:56,610 If it doesn't have it or if it doesn't have, I will get it. 82 00:06:57,000 --> 00:07:06,450 So again, the chocolate property means here is a check and I want to check the last one so the tag 83 00:07:06,630 --> 00:07:08,590 has the class of one. 84 00:07:08,610 --> 00:07:14,610 I will delete it when I click on it and if it doesn't have it, I will give it. 85 00:07:15,890 --> 00:07:21,830 We can just go here and reload, so here we got the last one when we click here. 86 00:07:22,040 --> 00:07:24,800 We got no class one when we clicked back. 87 00:07:25,130 --> 00:07:28,070 We can't toggle this class right now. 88 00:07:29,480 --> 00:07:31,850 OK, that's good. 89 00:07:32,360 --> 00:07:42,320 After this part, what we can do is to toggle that class to we can just copy this part and paste this 90 00:07:42,320 --> 00:07:43,040 to be true. 91 00:07:43,820 --> 00:07:48,170 And this is the same method we will use for the dark mode. 92 00:07:48,440 --> 00:07:51,200 We can just go here and reload. 93 00:07:51,560 --> 00:07:56,210 So now we can talk with the class using this method. 94 00:07:56,990 --> 00:07:58,190 OK, that's good. 95 00:07:58,580 --> 00:08:02,610 And here we can use for the mouse on. 96 00:08:04,340 --> 00:08:05,510 So it's OK. 97 00:08:05,510 --> 00:08:16,340 We can just use the OK here we got the double click the mouse on mouse enter mouse move mouse out and 98 00:08:16,340 --> 00:08:19,160 then we can go here and reload. 99 00:08:19,940 --> 00:08:26,480 So when we move on here we've got this, but this is not very good with a chuckle. 100 00:08:26,840 --> 00:08:31,460 So we can just use the remove and act. 101 00:08:32,810 --> 00:08:34,130 OK, that's good. 102 00:08:35,180 --> 00:08:39,850 And we can just use the click because of the ability to click for our project. 103 00:08:40,670 --> 00:08:45,740 So now we know how to use and remove and toggle. 104 00:08:46,280 --> 00:08:52,160 In the next year we will talk about how we can accommodate inside our Web page. 105 00:08:52,640 --> 00:08:54,570 So good luck and have fun.