1 00:00:00,300 --> 00:00:06,930 Every time we type something into our text area, we're invoking a function called text counter, so 2 00:00:06,930 --> 00:00:08,670 we set that up in the earlier lessons. 3 00:00:08,970 --> 00:00:15,690 So we are ready to calculate how much text we have within each one of these input fields or within the 4 00:00:15,690 --> 00:00:16,380 text area. 5 00:00:17,760 --> 00:00:25,740 So let's select that text area and selecting the content so we can get value and length and setting 6 00:00:25,740 --> 00:00:26,490 up a variable. 7 00:00:26,490 --> 00:00:29,520 We can call it count to contain that. 8 00:00:30,090 --> 00:00:33,570 So now within the console, I'm going to console log the count. 9 00:00:34,170 --> 00:00:40,170 And so now as we're typing in here, you can see that we're actually counting the number of characters. 10 00:00:40,440 --> 00:00:46,860 So it's not easy to get the number of characters available within each one of our input fields. 11 00:00:46,890 --> 00:00:52,740 So I also want to set up a character limit once we hit a certain length that we want to do something. 12 00:00:52,860 --> 00:00:53,610 So let's do that. 13 00:00:54,150 --> 00:01:00,460 So we're setting up some constant variables and we'll call it max length for the number of characters. 14 00:01:00,780 --> 00:01:02,280 So how many characters do we want? 15 00:01:02,280 --> 00:01:02,960 At most? 16 00:01:02,970 --> 00:01:04,230 Let's set up at 10. 17 00:01:05,300 --> 00:01:12,320 And we can also have warning length, and this one will set up our warning at 5:00 and we can always 18 00:01:12,320 --> 00:01:13,740 adjust these as needed. 19 00:01:14,060 --> 00:01:22,790 So now as we're getting the length of content counted but conditioned to see if count is greater than 20 00:01:23,210 --> 00:01:29,350 our max length, and if it is, then we can run the block of code contained in here. 21 00:01:29,990 --> 00:01:36,190 And for now we'll do a console log and getting our text area value. 22 00:01:36,320 --> 00:01:44,540 We'll get the substring starting at the zero position and returning back whatever the max length was 23 00:01:45,260 --> 00:01:45,600 snowing. 24 00:01:45,620 --> 00:01:53,300 To refresh, we can type in there and as soon as we hit our max length, we're outputting to the console 25 00:01:53,300 --> 00:01:55,640 only the first 10 character. 26 00:01:55,730 --> 00:02:00,050 So next, let's overwrite the content with those 10 character. 27 00:02:00,480 --> 00:02:06,750 So taking our text area, setting our value, and we can set the value to this substring value. 28 00:02:07,160 --> 00:02:08,670 So let's try that one more time. 29 00:02:09,080 --> 00:02:13,140 So now I won't be able to type more than 10 characters within this input field. 30 00:02:14,360 --> 00:02:16,670 Let's take a closer look at what Substring does. 31 00:02:17,120 --> 00:02:23,100 And we saw within the example that we can use Substring to return part of a string between a start and 32 00:02:23,100 --> 00:02:26,550 an end index or to the end of the string. 33 00:02:26,840 --> 00:02:34,190 So if we have starting so our first string is Mozilla and we're using substring returning back from 34 00:02:34,700 --> 00:02:38,810 index value number one to index value number three. 35 00:02:39,200 --> 00:02:46,700 You can think of it the same way as arrays where we would start at zero and then return back one, return 36 00:02:46,700 --> 00:02:50,870 back to two and then stop at three. 37 00:02:50,900 --> 00:02:58,370 So just before we hit the eye, so our output would be Ozz, if we do a substring of two, that means 38 00:02:58,370 --> 00:03:04,830 that we're going to start over here and return back all the content, starting with index or two. 39 00:03:04,880 --> 00:03:13,070 So going back into our code, you can see that we're starting at Zindagi Value Zero and we're returning 40 00:03:13,070 --> 00:03:19,280 back to index value 10, which is the maximum length, and that's why we can limit ourselves to ten 41 00:03:19,280 --> 00:03:19,980 characters. 42 00:03:20,030 --> 00:03:26,600 So this is a way that if you only want a certain amount of length to be added into your input fields 43 00:03:26,900 --> 00:03:31,030 or text areas, you can limit it and then you could overwrite it. 44 00:03:31,160 --> 00:03:39,080 And this way, every time that the user is either key up, key down, key change, then we're invoking 45 00:03:39,080 --> 00:03:40,670 the function text counter. 46 00:03:40,850 --> 00:03:46,520 This function is counting the length of text that's available within the field and then limiting that 47 00:03:46,520 --> 00:03:47,040 value. 48 00:03:47,600 --> 00:03:51,200 So go ahead and try this out for yourself, set some limits. 49 00:03:51,350 --> 00:03:54,580 And coming up next, I'll show you how we can do a warning length. 50 00:03:54,830 --> 00:04:01,010 So let's say after five characters, we want to turn the text read or we want to put a message out to 51 00:04:01,010 --> 00:04:01,520 the user. 52 00:04:01,790 --> 00:04:03,920 So we're going to do that in the upcoming lesson. 53 00:04:04,100 --> 00:04:09,920 And prior to the lesson, you can challenge yourself to build out that warning message and you can do 54 00:04:09,920 --> 00:04:12,530 it within the same format as we did with the max length. 55 00:04:12,980 --> 00:04:14,410 So go ahead and try this out for yourself.