Every time we type something into our text area, we're invoking a function called text counter, so
we set that up in the earlier lessons.
So we are ready to calculate how much text we have within each one of these input fields or within the
text area.
So let's select that text area and selecting the content so we can get value and length and setting
up a variable.
We can call it count to contain that.
So now within the console, I'm going to console log the count.
And so now as we're typing in here, you can see that we're actually counting the number of characters.
So it's not easy to get the number of characters available within each one of our input fields.
So I also want to set up a character limit once we hit a certain length that we want to do something.
So let's do that.
So we're setting up some constant variables and we'll call it max length for the number of characters.
So how many characters do we want?
At most?
Let's set up at 10.
And we can also have warning length, and this one will set up our warning at 5:00 and we can always
adjust these as needed.
So now as we're getting the length of content counted but conditioned to see if count is greater than
our max length, and if it is, then we can run the block of code contained in here.
And for now we'll do a console log and getting our text area value.
We'll get the substring starting at the zero position and returning back whatever the max length was
snowing.
To refresh, we can type in there and as soon as we hit our max length, we're outputting to the console
only the first 10 character.
So next, let's overwrite the content with those 10 character.
So taking our text area, setting our value, and we can set the value to this substring value.
So let's try that one more time.
So now I won't be able to type more than 10 characters within this input field.
Let's take a closer look at what Substring does.
And we saw within the example that we can use Substring to return part of a string between a start and
an end index or to the end of the string.
So if we have starting so our first string is Mozilla and we're using substring returning back from
index value number one to index value number three.
You can think of it the same way as arrays where we would start at zero and then return back one, return
back to two and then stop at three.
So just before we hit the eye, so our output would be Ozz, if we do a substring of two, that means
that we're going to start over here and return back all the content, starting with index or two.
So going back into our code, you can see that we're starting at Zindagi Value Zero and we're returning
back to index value 10, which is the maximum length, and that's why we can limit ourselves to ten
characters.
So this is a way that if you only want a certain amount of length to be added into your input fields
or text areas, you can limit it and then you could overwrite it.
And this way, every time that the user is either key up, key down, key change, then we're invoking
the function text counter.
This function is counting the length of text that's available within the field and then limiting that
value.
So go ahead and try this out for yourself, set some limits.
And coming up next, I'll show you how we can do a warning length.
So let's say after five characters, we want to turn the text read or we want to put a message out to
the user.
So we're going to do that in the upcoming lesson.
And prior to the lesson, you can challenge yourself to build out that warning message and you can do
it within the same format as we did with the max length.
So go ahead and try this out for yourself.