Let's take a look at how we can dynamically add a class to an existing element.
So I have some CSS up here,
and let's get rid of that.
I just have a box with a 100 height 100 background-color black.
Let's go ahead and change that class or add a class
rather to change that background color to be, let's say blue.
So we could say there's a class called blue,
and it's simply going to have a background color of blue.
Now, I need this box elements to actually exist.
And in my jQuery here,
I can simply say dot box,
dot add class blue.
And before I do that, actually,
let's go ahead and let's just work with classes for a little bit.
Let's work with instead of IDs that's worked with classes.
So we've got class box,
box, box, box, and let's change that to dot box.
So now when I refresh my page,
my black box turns blue and now it's,
you can kind of see,
let it flashes real quickly.
But it changing my box to be blue.
And we can actually see this in as a real example here is we can delete this inner DOM.
And this is what it looks like by default.
And all we're simply doing is adding blue to it.
Now, let's go ahead and wrap this in some sort of timeout.
So let's do set timeout.
And we could give this a function.
And let's make it timeout for two seconds.
And then select the box and add the class blue.
So when I refresh the page here,
it's going to wait just two seconds,
and then it's going to turn to blue.
Now if we want to write modern JavaScript,
we don't need to use a function there.
We can simply use an arrow function that's going to do the exact same thing,
refresh, wait two seconds, it turns blue.
We can also wrap this in any sort of event listener that we want.
So we could say something like the button when it's clicked.
Function.
Or because we don't need the this keyword,
we can do an arrow function.
And let's get rid of that and move that up.
And because we have a button event listener,
we needed button on the page.
So let's go ahead and add that button. Button.
Click me.
And when we click this button,
is going to select that box and add a class of blue.
Let's go ahead and refresh.
Click.
And something is not right here.
And that's because I type clicked,
it's supposed to be click.
So refresh. Click. There we go.
Refresh, click, it changes,
refresh, click, it changes.
We can do all sorts of things here and we could change the width as well.
So it's a width 100,
and this is simply going to change the width to be 100%.
And so we can add class blue.
We can also add class width 100 and refresh.
And it changes its to be width of 100%.
I want you to give this a shot. Try this.
This is going to be very, very important.
You're going to be using this a lot in vanilla JavaScript as well as regular jQuery.
So you're going to want to be able to add a class.
You can add multiple classes by simply adding a space in there.
And jQuery will figure it out and add those classes for you.
Wrap that in an event listener if you do not need the,
this keyword, I'm saying this like this.
If you don't need that inside of your function,
you can simply write an arrow function as well.
It's just a little more performance,
a little more modern JavaScript.
And then you can select your box or your element.
And then you can add a class of whatever your classes are.
So you are going to need to know a little bit of CSS for this.
If you don't really know CSS, that's okay.
You can just pause the video here and copy what I have on my screen.
I simply have a box, box class.
I've got a blue class, any width 100 class.
And all that's doing is going to be adding these classes.
And again, when we inspect,
we now have class box blue and width 100. Go ahead and give that a shot.
And when we are ready,
when we're nice and ready.
Let's go ahead and take this exact example and do
the exact opposite where we remove a class.