Hello and welcome back.
In this lesson, I'm going to show you how you can add an update classes.
So so far, the updates that we've done has been within the style attribute.
So when you open up your element, Inspecteur, in your browser, you can see that it's updating the
background, color and the color to the different values that have been represented within the form,
as well as we're updating the inner text that's contained within the input field and we're updating
that as well.
So in this lesson, we're going to add in a class.
So let's create and we can just call this one bigger.
So this is going to be a class called bigger.
And when it's applied, it's going to have a really big font size.
And we'll also update the font family.
So whenever we add in this class and the objective is going to be to add and remove the class.
So whenever we click the button, what we want to do is take that element and using select elements
and then the class list value of the object.
And what this is going to return back a list of all of the class that's available there.
So if I was to output that, now you're going to see that we've got an empty class list.
So what we want to do is we want to toggle that class and the class that we want to toggle is going
to be named bigger.
And I got to show you what's going to happen here, that every time I press that update button, it's
toggling the class.
So if you go back to the element, you're going to see that the class bigger now is added.
And of course, you can see that visually as well.
If I click it again, it's going to remove back that remove out that class will add it in.
And now if I go in and if I type in that class list, so going into that select element and class list,
you can see that what's available within the class list is we've got a number of classes and actually
we only have this one class.
So we have the class bigger.
And what it's doing is every time the button is clicked, every time this event is triggered, it runs
this block of code and it's triggering the toggling of the class so we can remove the class, we can
add the class, or we can toggle the class using the class list method.
So go ahead and try this this into your project.
So there's more DOM element manipulation coming up.