1 00:00:02,070 --> 00:00:04,870 So let's switch to this demo project 2 00:00:04,870 --> 00:00:09,870 and definitely also feel free to try it on your own first. 3 00:00:09,990 --> 00:00:12,960 Definitely feel free to try it on your own first 4 00:00:12,960 --> 00:00:15,620 with one important exception, 5 00:00:15,620 --> 00:00:20,620 you should not try to implement this color changing behavior 6 00:00:20,670 --> 00:00:24,370 because we're missing an important building block for that. 7 00:00:24,370 --> 00:00:29,370 But try adding the input field, maybe even the styling, 8 00:00:29,860 --> 00:00:33,270 and then also see if you can get 9 00:00:33,270 --> 00:00:36,130 this character account feature to work 10 00:00:36,130 --> 00:00:39,940 that you can calculate how many remaining characters we have 11 00:00:39,940 --> 00:00:43,290 if the maximum number of characters is 60, 12 00:00:43,290 --> 00:00:48,290 and then try updating this value after the input element. 13 00:00:49,830 --> 00:00:53,660 Now, if you try this on your own, I have one important hint. 14 00:00:53,660 --> 00:00:57,297 You will need to find out how many characters 15 00:00:57,297 --> 00:00:59,540 the user already entered, 16 00:00:59,540 --> 00:01:02,030 and you will be able to do this 17 00:01:02,030 --> 00:01:07,030 by accessing the length property on the input value 18 00:01:08,000 --> 00:01:10,340 you will have retrieved at some point. 19 00:01:10,340 --> 00:01:15,340 So .length on that input value will give you the length, 20 00:01:15,670 --> 00:01:17,580 the number of characters, 21 00:01:17,580 --> 00:01:20,770 a user entered into an input field. 22 00:01:20,770 --> 00:01:23,400 Definitely, try all of that on your own. 23 00:01:23,400 --> 00:01:25,960 I'll give you a short pause to pause the video 24 00:01:25,960 --> 00:01:27,180 and try it on your own 25 00:01:27,180 --> 00:01:29,973 and then thereafter we'll implement this together. 26 00:01:34,670 --> 00:01:37,710 So, let's now implement this together. 27 00:01:37,710 --> 00:01:41,940 And for this, I'll first of all ad a new demo.js file, 28 00:01:41,940 --> 00:01:45,590 which will contain the JavaScript code for this demo 29 00:01:45,590 --> 00:01:49,550 and in index.html, I will use demo.js 30 00:01:49,550 --> 00:01:52,343 instead of the old-app.js file. 31 00:01:53,830 --> 00:01:58,540 Now let's maybe start with the html content for that. 32 00:01:58,540 --> 00:02:01,842 And here I will also add some styling hands-on 33 00:02:01,842 --> 00:02:05,230 and therefore, I will add a couple of extra elements here, 34 00:02:05,230 --> 00:02:08,773 which I will use for applying my styles here. 35 00:02:09,720 --> 00:02:11,610 Of course, there isn't a single right 36 00:02:11,610 --> 00:02:13,400 or wrong approach to doing this. 37 00:02:13,400 --> 00:02:16,250 So if you wrote some different HTML code 38 00:02:16,250 --> 00:02:19,893 and it looks and works correctly, that's also fine. 39 00:02:21,070 --> 00:02:23,360 But here, I'll start by adding a form. 40 00:02:23,360 --> 00:02:26,000 Not because we'll do anything with it, 41 00:02:26,000 --> 00:02:29,650 but because it kind of makes sense semantically 42 00:02:29,650 --> 00:02:34,550 to put an input into a form, so that's well added here. 43 00:02:34,550 --> 00:02:37,820 I don't add the action or method though, 44 00:02:37,820 --> 00:02:40,523 because they don't really care about this right now. 45 00:02:41,970 --> 00:02:45,010 Then in there, I'll add a little div 46 00:02:45,010 --> 00:02:47,910 purely for styling purposes, 47 00:02:47,910 --> 00:02:51,180 which will give a class of control. 48 00:02:51,180 --> 00:02:53,910 A class, which I will use in my CSS code 49 00:02:53,910 --> 00:02:55,583 then to apply some styling. 50 00:02:56,460 --> 00:02:59,670 And inside of that div I'll add a label, 51 00:02:59,670 --> 00:03:02,680 a label where I say Product Name, 52 00:03:02,680 --> 00:03:07,183 because that's what we saw in this demo as well. 53 00:03:08,140 --> 00:03:13,140 And I'll add an input of type="text," 54 00:03:14,610 --> 00:03:18,387 which I will also give an id="product-name" 55 00:03:22,490 --> 00:03:25,660 and I'll connect that label to this input 56 00:03:25,660 --> 00:03:28,350 as we learned it in the forms section 57 00:03:28,350 --> 00:03:30,653 with the for attribute. 58 00:03:31,490 --> 00:03:36,490 So that semantically, the two elements are connected 59 00:03:36,500 --> 00:03:38,930 and screen readers, for example, 60 00:03:38,930 --> 00:03:41,623 know which label belongs to which input. 61 00:03:42,860 --> 00:03:45,330 And I'll give it a name attribute as well, 62 00:03:45,330 --> 00:03:48,187 where I will also say "product-name." 63 00:03:49,710 --> 00:03:54,330 Now that's almost it, I will add one last attribute here. 64 00:03:54,330 --> 00:03:58,150 And that's the max length attribute. 65 00:03:58,150 --> 00:04:01,300 We learned about these validation attributes 66 00:04:01,300 --> 00:04:03,240 in the forms section as well. 67 00:04:03,240 --> 00:04:07,550 And this allows us to limit the maximum amount of characters 68 00:04:07,550 --> 00:04:10,043 that can be inserted into this input. 69 00:04:11,010 --> 00:04:13,210 And I'll set this to 60 here. 70 00:04:13,210 --> 00:04:15,360 Of course, it's up to you which length 71 00:04:15,360 --> 00:04:18,403 you wanna choose here, but I'll go for 60. 72 00:04:20,130 --> 00:04:24,410 With that, by the way, if I save this, I got this input here 73 00:04:24,410 --> 00:04:27,640 and I can't type more than 60 characters. 74 00:04:27,640 --> 00:04:31,210 If I try to do that, it just stops. 75 00:04:31,210 --> 00:04:34,450 It doesn't allow me to enter more than 60. 76 00:04:34,450 --> 00:04:36,640 But of course, that extra output, 77 00:04:36,640 --> 00:04:39,200 which tells me the amount of remaining characters 78 00:04:39,200 --> 00:04:40,510 is missing. 79 00:04:40,510 --> 00:04:43,093 And that's why we wanna use JavaScript for that. 80 00:04:44,260 --> 00:04:46,790 And speaking off that, after this input 81 00:04:46,790 --> 00:04:51,730 still inside of this div, I will add a span here. 82 00:04:51,730 --> 00:04:56,730 A span which then actually will contain another span. 83 00:04:57,100 --> 00:04:58,980 And in this span here, 84 00:04:58,980 --> 00:05:03,980 I would like to insert my remaining number of characters. 85 00:05:05,390 --> 00:05:10,390 And hence, I'll give this span an id="remaining-chars," 86 00:05:14,940 --> 00:05:18,773 And I'll give that outer span an id="charcount" 87 00:05:19,930 --> 00:05:23,513 because I'll use this for styling purposes later. 88 00:05:25,090 --> 00:05:27,250 Now the content of this inner span 89 00:05:27,250 --> 00:05:32,030 is currently empty, or let's say 60, 90 00:05:32,030 --> 00:05:35,480 because at the beginning, if nothing was typed yet, 91 00:05:35,480 --> 00:05:39,590 the remaining number of characters we can insert is 60 92 00:05:39,590 --> 00:05:42,170 because that's our maxlength. 93 00:05:42,170 --> 00:05:44,543 That's why I'm adding 60 here as well. 94 00:05:45,670 --> 00:05:48,700 But then they're after outside of this span, 95 00:05:48,700 --> 00:05:53,700 I'll also insert some plain text a slash and then 60 96 00:05:54,130 --> 00:05:58,360 to kind of signal the maximum number of characters. 97 00:05:58,360 --> 00:06:01,080 And this is not wrapped in a span 98 00:06:01,080 --> 00:06:04,970 because I only need to span here for the first 60 99 00:06:04,970 --> 00:06:08,843 so that I can later target this through JavaScript. 100 00:06:09,950 --> 00:06:13,090 In order to get hold of that content here, 101 00:06:13,090 --> 00:06:17,320 that text here, that 60 here, I wanna wrap it in an element, 102 00:06:17,320 --> 00:06:21,240 which I can then easily select with JavaScript later 103 00:06:21,240 --> 00:06:24,440 so that I then later can change the text content 104 00:06:24,440 --> 00:06:28,393 of that element to update this remaining characters text. 105 00:06:30,120 --> 00:06:33,670 The maximum number of characters will never be updated 106 00:06:33,670 --> 00:06:35,230 because it will never change 107 00:06:35,230 --> 00:06:40,090 and hence, I don't wrap this with my span here. 108 00:06:40,090 --> 00:06:43,420 Now last but not least, outside of this div actually, 109 00:06:43,420 --> 00:06:44,920 but instead of the forum, 110 00:06:44,920 --> 00:06:48,010 I'll add a button with a text of submit, 111 00:06:48,010 --> 00:06:51,030 but this button is only there to look good, 112 00:06:51,030 --> 00:06:53,773 we're not going to do anything with it at this time. 113 00:06:56,213 --> 00:06:59,530 Now this is my HTML content. 114 00:06:59,530 --> 00:07:04,240 Now for the styling, I prepared a couple of styles 115 00:07:04,240 --> 00:07:07,190 and to not bore you and waste your time, 116 00:07:07,190 --> 00:07:10,080 you find these styles attached 117 00:07:10,080 --> 00:07:12,853 as style.css file is attached. 118 00:07:14,000 --> 00:07:19,000 And I did add here drag and drop it here into my project. 119 00:07:20,410 --> 00:07:24,070 Now definitely feel free to browse through these styles here 120 00:07:24,070 --> 00:07:26,320 and have a look at what I did here. 121 00:07:26,320 --> 00:07:30,400 There shouldn't be too much new content in here. 122 00:07:30,400 --> 00:07:33,180 These should all be CSS, rules and styles 123 00:07:33,180 --> 00:07:35,660 you saw before basically. 124 00:07:35,660 --> 00:07:38,870 I just have some basic styling here, some colors, 125 00:07:38,870 --> 00:07:43,310 some spacing that showed leads to this output here 126 00:07:43,310 --> 00:07:44,433 looking a bit better. 127 00:07:45,800 --> 00:07:48,160 Now for these styles to have an effect, 128 00:07:48,160 --> 00:07:50,010 we need to import them though. 129 00:07:50,010 --> 00:07:53,750 And therefore here in my head section, 130 00:07:53,750 --> 00:07:56,470 let's say between the title and the script, 131 00:07:56,470 --> 00:07:59,600 though the exact position does not matter, 132 00:07:59,600 --> 00:08:04,600 I will now also link to this styles.css file 133 00:08:04,800 --> 00:08:09,600 saved as HTML file and then zoom out quite a bit here 134 00:08:09,600 --> 00:08:13,440 to not break this layout like this 135 00:08:13,440 --> 00:08:17,230 so that I can see my output here. 136 00:08:17,230 --> 00:08:20,580 And that's now the HTML code and the CSS code 137 00:08:20,580 --> 00:08:21,993 with which I'll continue. 138 00:08:23,070 --> 00:08:26,550 Now, of course, we're all here for the JavaScript code, 139 00:08:26,550 --> 00:08:29,020 not for the styling or the HTML code 140 00:08:29,020 --> 00:08:31,890 and they'll for now, we will dive into demo.js 141 00:08:31,890 --> 00:08:34,350 and start writing some code. 142 00:08:34,350 --> 00:08:37,990 And for that let's recap what we wanna do. 143 00:08:37,990 --> 00:08:42,390 We wanna listen to every keystroke here in this input field, 144 00:08:42,390 --> 00:08:45,840 then we wanna count the number of characters, 145 00:08:45,840 --> 00:08:48,310 and then once we did that, 146 00:08:48,310 --> 00:08:51,900 we want to update this number here 147 00:08:51,900 --> 00:08:55,490 with the remaining amount of characters. 148 00:08:55,490 --> 00:09:00,490 So 60 minus the number of characters inserted here. 149 00:09:01,600 --> 00:09:03,470 Therefore to get started, 150 00:09:03,470 --> 00:09:07,150 I first of all wanna get access to the input field, 151 00:09:07,150 --> 00:09:10,520 and then to this span where I wanna output 152 00:09:10,520 --> 00:09:13,213 the updated number of remaining characters. 153 00:09:14,180 --> 00:09:17,100 Now the input field could be selected by id 154 00:09:17,100 --> 00:09:20,420 or by type with the curly selector 155 00:09:20,420 --> 00:09:22,540 since it's the only input field. 156 00:09:22,540 --> 00:09:24,400 And it's up to you, what you prefer, 157 00:09:24,400 --> 00:09:26,300 I will select the by id 158 00:09:26,300 --> 00:09:29,923 and get my let's say productNameInputElement, 159 00:09:32,490 --> 00:09:34,750 a pretty long variable name. 160 00:09:34,750 --> 00:09:37,460 You can definitely also use a shorter one, 161 00:09:37,460 --> 00:09:39,990 but I wanna be descriptive about 162 00:09:39,990 --> 00:09:42,583 which exact element I'm referring to here. 163 00:09:43,490 --> 00:09:45,150 And then in this variable, 164 00:09:45,150 --> 00:09:48,500 we can store the element which we get access to 165 00:09:48,500 --> 00:09:50,880 by using document.getElementById 166 00:09:51,820 --> 00:09:56,600 and then passing does ID name, product-name in my case 167 00:09:56,600 --> 00:09:59,613 as a parameter value to this method. 168 00:10:01,470 --> 00:10:04,073 Now, that will give us access to the input element. 169 00:10:04,990 --> 00:10:09,750 Now to get access to the remaining chars here to this pan, 170 00:10:09,750 --> 00:10:12,350 we can also again use this id 171 00:10:12,350 --> 00:10:16,400 and hence I will add another variable here, 172 00:10:16,400 --> 00:10:18,663 the remainingCharsElement 173 00:10:22,660 --> 00:10:25,750 and get access with document.getElementById. 174 00:10:25,750 --> 00:10:30,750 But now the ID is that ID I have here remaining-chars. 175 00:10:31,840 --> 00:10:33,493 So that's what I insert here. 176 00:10:34,860 --> 00:10:37,020 Now we've got these two elements. 177 00:10:37,020 --> 00:10:39,780 Now on that input element here, 178 00:10:39,780 --> 00:10:42,870 on that element, I wanna add an event listener 179 00:10:42,870 --> 00:10:45,860 because I wanna listen to every keystroke. 180 00:10:45,860 --> 00:10:50,020 Hence here we can use the product name, input element 181 00:10:50,020 --> 00:10:52,460 and add an event listener as we learned it 182 00:10:52,460 --> 00:10:54,543 with that addEventListener method. 183 00:10:55,940 --> 00:11:00,680 Now the event I do wanna listen to here is the input event 184 00:11:00,680 --> 00:11:02,873 because dad will occur for every keystroke. 185 00:11:03,790 --> 00:11:06,270 And then that second parameter value 186 00:11:06,270 --> 00:11:07,840 which we need to insert here, 187 00:11:07,840 --> 00:11:11,670 that will actually be the function that should be executed 188 00:11:11,670 --> 00:11:13,493 when that event occurs. 189 00:11:14,740 --> 00:11:17,350 For this, we need to add this function 190 00:11:17,350 --> 00:11:21,307 and the name could be updateRemainingCharacters 191 00:11:23,590 --> 00:11:27,110 because that's what this function ultimately will do. 192 00:11:27,110 --> 00:11:28,840 It will go to the dom 193 00:11:28,840 --> 00:11:32,203 and update the remaining characters that are displayed. 194 00:11:34,490 --> 00:11:37,130 Now, before I add the actual code 195 00:11:37,130 --> 00:11:40,010 that will be executed in this function, 196 00:11:40,010 --> 00:11:42,720 I already wanna finish this line of code 197 00:11:42,720 --> 00:11:44,200 and therefore now point 198 00:11:44,200 --> 00:11:47,210 at this update remaining characters function here 199 00:11:47,210 --> 00:11:49,890 and let the browser know that this is the function 200 00:11:49,890 --> 00:11:54,023 that should be executed whenever that input occurs. 201 00:11:56,120 --> 00:12:00,190 Now in this function, we now need to find out 202 00:12:00,190 --> 00:12:03,470 which value was inserted by the user. 203 00:12:03,470 --> 00:12:06,480 So which text is currently in the input element 204 00:12:06,480 --> 00:12:08,163 and then how long that is. 205 00:12:09,010 --> 00:12:11,100 Now to get access to the entered value, 206 00:12:11,100 --> 00:12:13,150 we got two main approaches. 207 00:12:13,150 --> 00:12:17,430 We can use this variable and access the value property 208 00:12:17,430 --> 00:12:21,600 or alternatively, we used the event object we learned about, 209 00:12:21,600 --> 00:12:25,010 which also gives us access to the target of the event, 210 00:12:25,010 --> 00:12:26,850 which is the same input element, 211 00:12:26,850 --> 00:12:29,860 and we can use stats to access to value. 212 00:12:29,860 --> 00:12:31,660 Both is absolutely fine. 213 00:12:31,660 --> 00:12:33,903 Here, I will use the event object. 214 00:12:34,780 --> 00:12:37,453 And therefore here, I'll get my enteredText, 215 00:12:38,890 --> 00:12:41,640 or however you wanna name this variable 216 00:12:41,640 --> 00:12:45,080 by reaching out to event.target.value 217 00:12:45,960 --> 00:12:47,403 as we did it before. 218 00:12:49,270 --> 00:12:54,230 Now, we need to find out how long that entered text is. 219 00:12:54,230 --> 00:12:56,150 We need to find out how long it is 220 00:12:56,150 --> 00:12:57,730 so that we can then compare it 221 00:12:57,730 --> 00:13:00,763 to our maximum number of characters, which is 60. 222 00:13:02,420 --> 00:13:06,573 And therefore I'll add my enteredTextLength variable, 223 00:13:07,930 --> 00:13:11,550 let's say, which is my entered text. 224 00:13:11,550 --> 00:13:15,660 And then I mentioned it in a little hint before, 225 00:13:15,660 --> 00:13:18,680 we have the length property here. 226 00:13:18,680 --> 00:13:21,060 Even though I'm not getting auto suggestion, 227 00:13:21,060 --> 00:13:23,410 because my IDE doesn't fully understand 228 00:13:23,410 --> 00:13:26,270 which type of value entered text will be, 229 00:13:26,270 --> 00:13:28,450 but we know that it will be a string 230 00:13:28,450 --> 00:13:31,350 and because of my hint, you know that on strings, 231 00:13:31,350 --> 00:13:35,330 you can actually get access to the length of that string 232 00:13:35,330 --> 00:13:37,123 width.length. 233 00:13:38,650 --> 00:13:43,180 As a side note on an array, if you had an array value, 234 00:13:43,180 --> 00:13:45,760 you also have to .length property 235 00:13:45,760 --> 00:13:48,950 to find out how many items are in the array. 236 00:13:48,950 --> 00:13:50,260 And when it comes to that, 237 00:13:50,260 --> 00:13:53,200 a string is treated a bit like an array 238 00:13:53,200 --> 00:13:55,840 because it's basically an array of characters, 239 00:13:55,840 --> 00:13:57,360 you could say. 240 00:13:57,360 --> 00:13:59,823 That's why we have to length property here. 241 00:14:01,100 --> 00:14:04,600 With that, we know how long do you enter text is, 242 00:14:04,600 --> 00:14:06,050 now we need to find out 243 00:14:06,050 --> 00:14:09,210 how many remaining characters we have. 244 00:14:09,210 --> 00:14:11,290 And that will of course be 60 245 00:14:11,290 --> 00:14:14,723 minus the current length of the entered text. 246 00:14:15,610 --> 00:14:18,390 So here maybe with an empty line in between 247 00:14:18,390 --> 00:14:21,920 to improve readability, I'll add a new variable 248 00:14:21,920 --> 00:14:24,500 which I will name remainingCharacters, 249 00:14:26,550 --> 00:14:30,683 and that's 60 minus enteredTextLength. 250 00:14:35,200 --> 00:14:37,540 Now, if you wanna get really fancy 251 00:14:37,540 --> 00:14:39,580 and you definitely don't need to do that, 252 00:14:39,580 --> 00:14:44,580 but if we wanna get really fancy, instead of using 60 here, 253 00:14:44,850 --> 00:14:49,550 we could actually also extract the maximum amount 254 00:14:49,550 --> 00:14:54,550 of allowed characters dynamically from that attribute, 255 00:14:55,340 --> 00:14:56,720 which we set on input 256 00:14:57,570 --> 00:15:01,990 so that we don't need to hard-code as it's called 257 00:15:01,990 --> 00:15:04,950 the 60 here into our JavaScript code 258 00:15:04,950 --> 00:15:08,770 and change it whenever we changed 60 here, 259 00:15:08,770 --> 00:15:12,440 but that we instead extract the maxlength 260 00:15:12,440 --> 00:15:14,270 from that input element 261 00:15:14,270 --> 00:15:18,160 so that if we ever decide to change that allowed maxlength, 262 00:15:18,160 --> 00:15:20,810 we only need to do it here and here, 263 00:15:20,810 --> 00:15:23,343 but not also in the JavaScript code. 264 00:15:24,230 --> 00:15:27,140 And a for that, we could add a new variable 265 00:15:27,140 --> 00:15:29,500 also outside of do function. 266 00:15:29,500 --> 00:15:31,400 It doesn't matter. We can do it outside, 267 00:15:31,400 --> 00:15:33,300 we can do it inside. 268 00:15:33,300 --> 00:15:37,507 I'll do it outside, which could be named maxAllowedChars. 269 00:15:39,990 --> 00:15:43,870 And here we can reach out to the productNameInputElement, 270 00:15:43,870 --> 00:15:46,740 which I selected here 271 00:15:46,740 --> 00:15:51,393 and there we'll have a maxLength property. 272 00:15:52,580 --> 00:15:55,430 I also don't get auto suggestion here, 273 00:15:55,430 --> 00:15:58,570 but I know it because it's an input element object, 274 00:15:58,570 --> 00:16:00,460 which we have access to. 275 00:16:00,460 --> 00:16:04,160 And as always, you can console there your elements 276 00:16:04,160 --> 00:16:06,630 to have a look at them in the browser dev tools 277 00:16:06,630 --> 00:16:09,920 and see which properties are available. 278 00:16:09,920 --> 00:16:11,120 And there, you would see 279 00:16:11,120 --> 00:16:14,070 that we have such a maxLength property, 280 00:16:14,070 --> 00:16:17,180 which holds the maximum amount of characters 281 00:16:17,180 --> 00:16:20,103 that are allowed to be entered in this input element. 282 00:16:21,400 --> 00:16:24,760 And with that, we can then use maxAllowedChars here, 283 00:16:24,760 --> 00:16:28,130 this variable instead of 60 down there 284 00:16:28,130 --> 00:16:31,503 to calculate our remaining characters. 285 00:16:34,040 --> 00:16:36,930 I hope this makes sense. 286 00:16:36,930 --> 00:16:40,640 Now, here we are performing a mathematical operation 287 00:16:40,640 --> 00:16:44,100 and hence, this should give us a number in the end. 288 00:16:44,100 --> 00:16:46,983 It should give us the number of remaining characters 289 00:16:46,983 --> 00:16:48,863 that we have available. 290 00:16:50,470 --> 00:16:53,930 And now as a very last step here in this function, 291 00:16:53,930 --> 00:16:56,830 we now need to update this value 292 00:16:56,830 --> 00:17:00,990 with our new remaining characters number. 293 00:17:00,990 --> 00:17:05,579 And that value is the value in this span, this span here, 294 00:17:05,579 --> 00:17:08,710 and we already got access to this span here. 295 00:17:08,710 --> 00:17:12,383 So now we can reach out to remainingCharsElement 296 00:17:14,810 --> 00:17:17,920 and then set the textContent off that element 297 00:17:17,920 --> 00:17:21,443 to our remaining characters here, like that. 298 00:17:23,380 --> 00:17:26,173 And that should be all we need for now. 299 00:17:27,010 --> 00:17:30,200 If you save that and you make sure that demo.js 300 00:17:30,200 --> 00:17:33,540 is linked to your index.html file, 301 00:17:33,540 --> 00:17:37,540 then you should now be able to reload or to go back 302 00:17:37,540 --> 00:17:40,960 and start typing here. 303 00:17:40,960 --> 00:17:45,473 And as you see this number after the inputed field updates. 304 00:17:46,400 --> 00:17:50,630 We don't have to change in color as we below 10, 305 00:17:50,630 --> 00:17:52,540 that's something we'll add later, 306 00:17:52,540 --> 00:17:56,690 but we get the basic functionality in place now. 307 00:17:56,690 --> 00:18:00,500 And this applies basically everything we learned about 308 00:18:00,500 --> 00:18:02,590 over the last hours 309 00:18:02,590 --> 00:18:05,910 and we see now why we could use JavaScript 310 00:18:05,910 --> 00:18:08,470 because dynamically updating something 311 00:18:08,470 --> 00:18:12,120 which we see on the page and reacting to certain events 312 00:18:12,120 --> 00:18:14,160 that are triggered by the user, 313 00:18:14,160 --> 00:18:19,160 that is something we cannot do with just HTML and CSS, 314 00:18:19,660 --> 00:18:21,800 and therefore we need JavaScript 315 00:18:21,800 --> 00:18:25,930 to run our more complex logic, which we have here, 316 00:18:25,930 --> 00:18:28,890 where we count the number of characters 317 00:18:28,890 --> 00:18:30,890 compare that to our maxAllowedCharacters 318 00:18:31,740 --> 00:18:34,990 and then update what we see on the screen. 319 00:18:34,990 --> 00:18:36,880 That's why we use JavaScript, 320 00:18:36,880 --> 00:18:40,900 and here we apply a lot of the concepts we learned about 321 00:18:40,900 --> 00:18:42,393 over the last hours.