Now we got our first if statement in action
that does something useful.
It adds these classes
if we have less than 10 remaining characters.
But at the moment with that, of course,
whenever we go beneath 10 characters that works as expected,
but if we go above 10 remaining characters again,
then the warning class is not removed.
It's still applied
and therefore we still have this orange color.
Now that's working as expected
because with this if statement,
we only add the warning class,
we have no code that would remove it.
And just because this code doesn't run
with every execution of this function,
does not mean that past executions of this code
would be undone if it does not run again in the future.
So if this code ran once,
because we went beneath 10 characters once, that's enough,
the class has been added and it will not be undone
unless we reload this entire site
and therefore restart our JavaScript code, so to say,
as we restart everything on this page.
So if we wanna remove this warning class
as soon as we are above 10 characters again,
we need to alter this if statement a little bit,
and we need to add a so called else statement,
an else branch to it.
Because that's another key feature of if statements,
not just in JavaScript,
but again, in basically every programming language.
You cannot just define a condition
and then code that should be executed
if the condition is met,
but you can also define code that should be executed
if that condition is not met.
And you do this by adding the else keyword here,
right after the closing curly brace
of that if statement code block,
and then you again, add opening and closing curly braces.
And now we extended this if statement
and we added such an else branch.
And now you can put code
into that else branch code block here,
between these curly braces,
to execute that code only
if that condition here should not be met.
Now you don't need an else branch
for every if statement you write.
It simply depends on what you wanna achieve,
but very often such a else branch can be useful
to execute some alternative code.
And here the alternative code would be
that we wanna remove the warning class,
So by calling the remove method instead of the add method.
And the great thing about remove, by the way,
is that if it should run,
when no warning class has been added yet,
it will just not do anything.
So it won't cause an error or anything like that
if it finds no warning class.
But if it does find one, once this code executes,
this warning class will be removed.
And now with such an else branch added here,
if you save that code again and you go back,
you can see that
if I type something into this input field here,
now the warning class has been added.
But if I remove characters here,
then as soon as I'm greater than 10,
you see the styles change
because that warning class was removed.
And you can see it flash here on the right
as the warning class is added to the DOM,
so to the parsed and displayed HTML content,
and as it is removed thereafter.
And that's now working the way it should.
But an else branch is not all you can add.
Sometimes you even have different conditions
which you wanna check.
Maybe we wanna add a brand new class.
If we have no remaining characters,
maybe we wanna add a red background then,
and we wanna add the warning class
if we have less than 10
and no class if we have more than 10 remaining characters.
To achieve this,
we could change this code and say that
if remaining characters is equal to zero,
using the triple equal sign comparison operators,
since this is a best practice,
so a pattern you should typically follow.
And with that, we would now only execute this code
if remaining characters is equal to zero.
Now let's say in this case,
we wanna add an error class here,
not a warning class, but an error class.
Now this is a class we have yet to add in our CSS code,
so let's quickly go there to style CSS
and maybe duplicate these two rules.
So copy and paste them,
but replace warning with error here, like this,
and now let's pick more reddish colors.
So here I'll go more into the red color area
and have a light red color as an input background.
And here have a red color as a span text color.
And that's now this error class,
which will be added if we have zero remaining characters.
And with that,
we, of course, wanna remove that error class
if we have more than zero remaining characters,
but, and that's not a tricky thing,
we also wanna have a condition in between zero
and this else block here.
And for that,
we can also add an else if statement
to add multiple conditions
that are evaluated step-by-step.
For this, we add else if like this,
after the closing curly brace of the if block.
And then we add opening and closing curly braces
to define the code that should be executed
if some other condition is met.
And to add this other condition,
we also add parentheses here
to put our condition between those parentheses
and then this else keyword here
goes after the closing curly brace of the else if branch.
Here we can now define another condition.
For example,
that remaining characters is smaller or equal than 10.
So what we had before.
And in that case, I'll copy this code.
In that case, we can add this warning class here like that.
And in the else branch we therefore now
don't just wanna remove the error class,
but we also wanna remove the warning class like this.
By the way, you can also rewrite this
and simply pass multiple parameter values to remove
and pass all the classes you wanna remove
as individual class names like this,
that will also work.
Now with that, we added our else if condition.
And how will this overall conditional block
now be evaluated by JavaScript?
Well, it always starts at the top.
That's always how your JavaScript code executes,
top to bottom.
And it first of all has a look at this condition.
If this condition is met,
we go in here and the rest of this if block is ignored.
So the else if and the else statement will be ignored
if this first condition is met.
If it's not met,
so if we have more than zero remaining characters,
it will move on to this else if condition
and evaluate this condition.
If this condition is met now,
it goes in here and executes this code
and ignores the else block.
If this condition here is also not met,
then this code is, of course, not executed
and instead JavaScript moves on to the else block
and executes that code instead.
And therefore with that if we save all of this,
if I start typing here, initially nothing happens.
But if I go below 10 characters,
I have my old warning class added.
If I go above 10 characters, it's still removed.
And if I go to zero characters,
I have that error class added in addition,
hence I have that red background
and that red color here.
But if I go above 10 again, both is removed.
Now the error class is actually not removed
as soon as I am above zero
because we only execute this remove command
in the else branch,
so only if we also are greater than 10.
If you would want to remove the error class
as soon as possible,
you would have to add that remove code here
to this else if branch.
So we would have to copy that
and remove error, and only error,
as soon as we are inside of this block
and only remove warning down here
if we are in the else block.
With those adjustments made,
now you would see that if we enter something here,
if we enter some text,
now the error class is removed
as soon as we have at least one remaining character
and warning is removed
if we are above 10.
And that's how we can run code conditionally
with if statements
and how we can use extra features like else if and else,
if we need them.