This lesson will demonstrate how you can add a class and remove a class from an element.
We're going to first create a class, so setting up a border for this class, making it a red border,
and we'll update also the color of the inner element text to be read as well.
I'm also going to do a quick update to this value so that we have Barch instead of dog.
And I'm going to also update this one here so that everything is consistent with the names here that
we're using in the MP threes.
Next, let's set up and update setting, adding our style.
So create a style or we can do add style, lower animal.
So we're sending over the different styles that we want to add and which elements we want to add that
style to.
Now, using the function add style, we need to get the name of the element that we want to add the
style to.
And this is going to match with the element with the class of the name that we want to add the style
to.
Let's use query selector to select an active element.
So active elements and we're going to use document query selector.
And this is one of the nice things about Querrey selector is we can make this fully dynamic so we know
that classes need to have the dot in front of it and all we need is a string value for the name so we
can do it within this type of format.
And as you can see, we are still passing over the name.
So if I console log out the value of name, you're going to see that this is going to be the name of
the element, inner turmoil of the element that was clicked.
And right now, for now, I'm going to commentate the making of the sound so we see that we get lion
cougar bark and so on.
So that's coming in from ad style.
And that also means that we can select that activate and we're going to output that into the console
now.
So whatever that element is, and this is dependent on having the class with the same content as the
inner text as well.
So you can see when you click it, we're selecting the right element that's been clicked.
So that gives us the ability to update that particular object because now we've got it in.
Variable called active class, that's where our object is sitting and we can do something with this
active element where we can get the class list.
And we can add to the class list and what we want to add is active to that class list, so let's try
that out.
So now when I click it, you see they go red.
Next thing that we want to do is we actually don't want them to stay red.
We want them to actually turn back to its original color.
And this is where we can use another JavaScript method called Septime Timeout.
And what this does is this executes a snippet of code after a specified delay and this delay is specified
within milliseconds.
So using function.
We can get that active element object and using class list, and just as we added a class, we can now
remove a class and the class that we want to remove is active.
So what's going to happen here is that we're going to run this block of code and we need to specify
in what time of what time period we're going to run that block a code so we can do it within two hundred
milliseconds.
So now let's try that out so we'll see that we can click it.
It goes red and then it turns back to its original color.
And when you inspect that element.
So going into our HTML and make this a little bit bigger so we can better see it.
So watch when I click the element, you see it gets that active class added and that's only for two
hundred milliseconds.
So it's a fifth of a second there.
So it's rather quick.
But you see that those elements are getting added in and that class is being added in updating those
elements.
So go ahead and try this one out for yourself where you're adding classes and also try out that set
time out method in JavaScript.
So try both of these new methods out, adding classes, removing classes and then setting a timeout.