1
00:00:00,650 --> 00:00:04,910
This lesson we're going to extend on what we learned last time, and this is where we're going to add

2
00:00:04,910 --> 00:00:11,690
in a warning message, so I've updated some of the values or max length now is 20, and that's what

3
00:00:11,690 --> 00:00:12,590
we're going to hit the max.

4
00:00:12,590 --> 00:00:14,930
We're not going to be able to enter any additional characters.

5
00:00:15,110 --> 00:00:22,970
We've also added in a warning length so that seven characters will start warning the user that they're

6
00:00:22,970 --> 00:00:23,980
running out of space.

7
00:00:24,380 --> 00:00:32,060
So adding that in we're going to do the same format as we did with Count checking to see if we're over

8
00:00:32,060 --> 00:00:33,380
the warning length.

9
00:00:33,710 --> 00:00:37,040
And if we are, then we're going to run this function, this block of code.

10
00:00:37,460 --> 00:00:44,660
And what we can do is we can use that output element, sending some text to the user and we're going

11
00:00:44,660 --> 00:00:48,500
to output how many characters the user has left.

12
00:00:48,800 --> 00:00:52,220
So we can do this by doing max length, minus count.

13
00:00:52,430 --> 00:00:57,740
So it's going to give us how many characters are still available and we'll just type in characters.

14
00:00:58,040 --> 00:00:59,810
So let's shrink that down and try that.

15
00:00:59,820 --> 00:01:01,390
It is a fairly long statement.

16
00:01:01,670 --> 00:01:04,610
So once we hit over seven, you're going to see that.

17
00:01:04,610 --> 00:01:08,840
Now, we've got our countdown here telling us how many characters we have left.

18
00:01:09,290 --> 00:01:11,960
We can also have that just by default.

19
00:01:12,380 --> 00:01:19,340
And we can add in some classes to indicate that maybe this warning message is going to turn this particular

20
00:01:19,340 --> 00:01:23,030
output field red and already set up a class for that.

21
00:01:23,340 --> 00:01:25,850
So we need to add in the class of red.

22
00:01:26,170 --> 00:01:32,150
We can use this because we already have that output element using the class list method.

23
00:01:32,450 --> 00:01:35,960
It gives us the ability to add and remove classes.

24
00:01:36,230 --> 00:01:40,300
So we just need to specify what the class name is that we want to add it in.

25
00:01:40,670 --> 00:01:41,690
So try that out.

26
00:01:41,960 --> 00:01:47,210
And you can see once I go over seven, then it's going to go read one problem.

27
00:01:47,520 --> 00:01:50,270
If I go all the way back down, it doesn't go back black.

28
00:01:50,490 --> 00:01:52,220
So this is where we need to have else.

29
00:01:52,700 --> 00:01:57,170
And within the else we can remove the class of red.

30
00:01:57,860 --> 00:02:05,210
And that way whenever we go back down and we're still good, then we are going to go back to a black

31
00:02:05,210 --> 00:02:05,720
text.

32
00:02:06,260 --> 00:02:13,100
So going back to remove goes black and we can issue warning messages to the person interacting with

33
00:02:13,100 --> 00:02:13,670
the content.

34
00:02:14,330 --> 00:02:19,730
So go going to try this one out for yourself, add in the warning message, add in the account.

35
00:02:19,760 --> 00:02:23,570
You can adjust these values as needed to try it out for yourself.