This lesson we're going to extend on what we learned last time, and this is where we're going to add
in a warning message, so I've updated some of the values or max length now is 20, and that's what
we're going to hit the max.
We're not going to be able to enter any additional characters.
We've also added in a warning length so that seven characters will start warning the user that they're
running out of space.
So adding that in we're going to do the same format as we did with Count checking to see if we're over
the warning length.
And if we are, then we're going to run this function, this block of code.
And what we can do is we can use that output element, sending some text to the user and we're going
to output how many characters the user has left.
So we can do this by doing max length, minus count.
So it's going to give us how many characters are still available and we'll just type in characters.
So let's shrink that down and try that.
It is a fairly long statement.
So once we hit over seven, you're going to see that.
Now, we've got our countdown here telling us how many characters we have left.
We can also have that just by default.
And we can add in some classes to indicate that maybe this warning message is going to turn this particular
output field red and already set up a class for that.
So we need to add in the class of red.
We can use this because we already have that output element using the class list method.
It gives us the ability to add and remove classes.
So we just need to specify what the class name is that we want to add it in.
So try that out.
And you can see once I go over seven, then it's going to go read one problem.
If I go all the way back down, it doesn't go back black.
So this is where we need to have else.
And within the else we can remove the class of red.
And that way whenever we go back down and we're still good, then we are going to go back to a black
text.
So going back to remove goes black and we can issue warning messages to the person interacting with
the content.
So go going to try this one out for yourself, add in the warning message, add in the account.
You can adjust these values as needed to try it out for yourself.