OK, guys, in this video, we will talk about how we can add, remove and tumble clashes, the first
thing we will do right here is to add one and type something inside like this as either one.
And this a different way to add tile inside the estimated five page title.
And then here we can make this one to be having class at one.
Or just class, because we will use class to OK.
As for this part, what we can do is to add some style like class.
Let's make this to be a one one.
OK, let's give it a color of red, the background color of the black and the padding so we can just
go and reload.
OK, that's good.
We can now add a script.
What we want to do here.
We wanted you to lead that class of class one using the JavaScript we can make here, document DOT choir
with a lecture and then we will choose the class one and then side here we will add something which
is called class.
This list is all of the classes inside the style and then here we will use added remove and Tuggle.
But here we want to weave a class so we will use remove, we can type here, remove and then up in the
end and then inside we will remove a class.
What class do you want to remove?
I want to remove that class.
One, we can go and reload.
So now we have deleted this class.
OK, that's good.
Let's talk now about how we can add a class for the JavaScript.
We can just go here and see this one from here, OK?
And then we can go here instead of removed.
We can use act and then we can go to the Web page.
But first, let's leave this slide so we can see what we have.
We have this here.
But when I get this back to its original position and then go and reload the page, we just centered
around this part of the problem.
And it's, uh, I think we have something wrong here.
What's the problem with the part?
We have something wrong here, so we need to check this problem right here.
OK, here we got the problem.
The problem is with this, we don't have a class here.
So this is defined.
Let's just make this one, three, two, one go before and reload.
So now we've got this style.
OK, let's make it for the click function.
We can just go to this part and we can make a document that requires a lecture to be for each one.
And then here we can make an event left corner for the click function.
Here we got mouse on mouse, enter max leave by people just you click and then here we will add a function
like that.
OK, and then we can covid after being thighed, but we can give it here a class of the class one and
then we can do this part.
OK, we can up this and then at this part we can try the two so we can make sure no, we get something
wrong with this bird.
So what's the problem here?
I want to be having a class of two.
Yes, yes, this to be having that background of red and the color like this, the problem.
OK, now basket after this part, what we can do is to go here.
We can apply this again.
OK, we can just scroll down.
I want to click on each one to add the class of two.
We can make this one to be one, OK?
And I want to move that class of one.
Let's start with deleting that class of one and go here and reload when you click on add to one.
So here I have a class of class two.
Let's try to apply it for the remove method.
We can just go here instead of add.
We will use Removeable and this we will remove that class one.
We can just go here and add class one and then here we can reload.
So here we got the header one.
OK, we can remove that class of one from here because we don't want the class when we click here.
So now we have deleted this class.
OK, after this part let's remove the class of one and add the class of two.
When we go and reload, we have the last one, but when we click here, we got that class, too.
But what if I want to?
What if I want to click back?
So I have that class one game.
There is something which is called Tuggle.
And this also will be better than you.
Remote class.
I don't want to get back every time to the TSA to make sure that it's already having the class of class
one or two.
This will be unlike the thing we can use here is that Tuggle method.
And I'm going to show you what that toggle is we can do like this one right here.
So what is the toggle, the taco maze, if here is that tag, the X1 tag.
If it has the class one, I will remove it.
If it doesn't have it or if it doesn't have, I will get it.
So again, the chocolate property means here is a check and I want to check the last one so the tag
has the class of one.
I will delete it when I click on it and if it doesn't have it, I will give it.
We can just go here and reload, so here we got the last one when we click here.
We got no class one when we clicked back.
We can't toggle this class right now.
OK, that's good.
After this part, what we can do is to toggle that class to we can just copy this part and paste this
to be true.
And this is the same method we will use for the dark mode.
We can just go here and reload.
So now we can talk with the class using this method.
OK, that's good.
And here we can use for the mouse on.
So it's OK.
We can just use the OK here we got the double click the mouse on mouse enter mouse move mouse out and
then we can go here and reload.
So when we move on here we've got this, but this is not very good with a chuckle.
So we can just use the remove and act.
OK, that's good.
And we can just use the click because of the ability to click for our project.
So now we know how to use and remove and toggle.
In the next year we will talk about how we can accommodate inside our Web page.
So good luck and have fun.