The alternative way
of using this style property,
and then it's nested properties,
would be that we maybe wanna set certain CSS classes
on elements.
And indeed I prepared some classes here.
In styles.css, you will see if you scroll through that file,
that there is this warning class,
which I actually use in conjunction with the input element.
And since there is no space in between,
this means that I wanna select all input elements
that have the warning class applied to them.
Whereas if we had a blank in between,
this would mean that I wanna select
all the elements that have a warning class
that are child or descendant elements of input.
So here I have it without a blank,
which means all inputs that have warning class
added to them.
And to same for remaining-chars.
The element with the remaining-chars ID
should receive this color
if it also has the warning.css class
and out of the box, this warning.css class
is not added to the input or to this span with that ID.
It's not added.
But that means that if we do added with JavaScript,
we should be able to apply the styles
configured for this class,
whenever the class is added with JavaScript
and that's something we can also do here.
For this all again, use my span element.
And for this I'll quickly re-select it
since this page updated.
For that, I just wrote const span
and then if I press the up arrow,
it shows me previously used commands or code lines,
and I can just auto complete them
by hitting Tab and to save some time
and then hit enter to execute it.
Now you only need to do that if the page reloaded,
because then that span element constant,
which loss stored in memory or would be lost otherwise.
Now we do have it back
and now to change the CSS classes on that element,
we've got two main ways of doing that.
We do have to className property,
so not class, but className.
The reason is that class
actually is a reserved word in JavaScript,
we haven't used it yet, but it is a reserved word,
fulfilling a certain purpose,
and therefore does property has class name as a name.
And className then can be set equal to a string value,
which is basically the value for the class attribute
that will be set on that element.
So that could be 'first-class second-class'
here using a dash is no problem
since we're inside of a string.
And if I set this, then for example,
we would see that on this span, these classes were added.
So whatever you set as a value for className
will be added as the class attribute on that element
for which you are setting it.
And that's one way of setting classes.
And of course, therefore we could set it
to a different string
where we don't say first class, second class,
but instead warning.
Now I would override my classes on that element
with that new class string,
in this case with only one class therefore.
And if I hit Enter, you'll notice that this got orange.
Because if we inspect this again,
we now see that class is set to warning
and first-class and second class
were overwritten therefore,
and that then in turn has this affect
that this css rule is becoming active
and is applying this color to this element.
That's just CSS rule
which I showed you a couple of seconds ago, this one here.
And that's one way of setting CSS classes with JavaScript.
This approaches often great, but it has a disadvantage.
If you are doing this on an element
that already has a class, which is not the case here,
but if you already had a class on that element,
let's say this span here already had a class attribute
with some class, which has redundant here,
but let's say we had this class for some reason already.
Then whenever you do override it.
So if I re select my span element here,
and I then overwrite className with warning,
then this warning class would be applied,
but we see the old class.
Some class is missing now, it was overwritten.
And that might sometimes be what you want,
but sometimes it's also not what you want.
Now, the solution for this would be
that you set className= 'warning,'
and then the class which you wanna persist.
So what you don't wanna lose.
But that of course means that you always need to remember
which classes are already on that element,
or you always need to write some extra code
that looks at the element, extracts the existing classes,
and then appends a new class.
And that gets even more annoying
if you then want to remove a class,
because then you have to the existing string of class names
with a new string, which is all the old class names
minus the one you wanna remove.
It's all doable, but it can be annoying.
That's why, in addition to className,
we also have the classList property.
And classList actually is an object
with a couple of utility methods
that make managing classes on HTML elements easy.
For example, you have add method,
which you can execute like this,
to which you pass a string, which contains the className
or a classNames, which you wanna add, like warning.
And now that we'll add this
and we also have a remove method
which removes the className which you're passing here
and only that class, no other classNames.
So here with that, if we now inspect this again
after executing the remove, you see this is gone.
And if I would reload this entire page
so that some class is set since this is set initially here,
if I now would get access to my spanElement again,
if I then first of all, execute classList.add 'warning'
like this.
Then if we inspect this again,
we see that some class is still there,
but in addition, warning was added.
And if I go back and I remove warning.
So if I change, add to remove here and execute this,
then hopefully and surprisingly,
we see that some class is still there
and warning was removed.
And therefore you can also change classes
besides those styles, with the style attribute
either by using className, to override the class attribute
or classList to manage it in a more elegant way.
And often classList of course, it's the better choice
since you have more fine grain control over what's going on.
And that's how you can change styling of elements.
And of course not just of span elements,
but of any elements that you can style with CSS.
Now, that's also the conjunction of CSS and JavaScript,
and we see how these two languages work together
with help of style and of these class properties.
Now let's move on to the conditional part
because now that we know how we can add
and remove the warning class,
we of course wanna do that conditionally
based on the amount of characters the user entered.
We only wanna do that
if there are less than 10 remaining characters.