1 00:00:02,040 --> 00:00:04,240 So, were you successful? 2 00:00:04,240 --> 00:00:06,640 Let's do this together. 3 00:00:06,640 --> 00:00:09,550 We want to make sure that we add this warning class here 4 00:00:09,550 --> 00:00:13,210 to the input and to the remainingCharacter's span 5 00:00:13,210 --> 00:00:16,920 if we have less than 10 remaining characters. 6 00:00:16,920 --> 00:00:19,440 And with our newly gained knowledge, 7 00:00:19,440 --> 00:00:22,180 that's not too difficult to do. 8 00:00:22,180 --> 00:00:27,180 Here we can just write "if" inside of this function here, 9 00:00:27,950 --> 00:00:31,830 I'm inside of this function, and here I'm writing "if". 10 00:00:31,830 --> 00:00:34,150 Then you'll learned that we need parentheses 11 00:00:34,150 --> 00:00:35,823 and then curly braces. 12 00:00:36,890 --> 00:00:39,590 Now, the code that should eventually be executed 13 00:00:39,590 --> 00:00:43,100 if the condition is met, goes between the curly braces, 14 00:00:43,100 --> 00:00:45,903 but the condition goes between those brackets here. 15 00:00:46,800 --> 00:00:50,550 And the condition here is that remainingCharacters 16 00:00:50,550 --> 00:00:54,183 is smaller than 10 or is smaller and equal than 10. 17 00:00:55,580 --> 00:00:58,460 So here we can refer to remainingCharacters, 18 00:00:58,460 --> 00:01:01,980 which is the number inferred with this calculation 19 00:01:01,980 --> 00:01:05,019 and then use the smaller or equal operator 20 00:01:05,019 --> 00:01:06,653 and compare it to 10. 21 00:01:08,910 --> 00:01:12,910 Now, we also see how we can derive such a boolean 22 00:01:12,910 --> 00:01:15,020 without a hard-coded value 23 00:01:15,020 --> 00:01:18,300 because, of course, remaining characters will be inferred 24 00:01:18,300 --> 00:01:21,390 dynamically whenever this function executes 25 00:01:21,390 --> 00:01:24,250 which happens on every keystroke 26 00:01:24,250 --> 00:01:26,470 and remainingCharacters will be different 27 00:01:26,470 --> 00:01:28,660 on every keystroke. 28 00:01:28,660 --> 00:01:31,490 And only if it's smaller or equal to 10, 29 00:01:31,490 --> 00:01:35,330 the code inside of this if block, as it's also called, 30 00:01:35,330 --> 00:01:37,380 will be executed. 31 00:01:37,380 --> 00:01:40,370 And in here, I want to add this warning class 32 00:01:40,370 --> 00:01:44,357 and therefore, I can reach out to remainingCharsElement, 33 00:01:45,310 --> 00:01:47,580 which is this span 34 00:01:47,580 --> 00:01:50,910 and there use this classList object we learned about 35 00:01:50,910 --> 00:01:53,313 to add this warning class. 36 00:01:54,780 --> 00:01:57,890 And we don't just want to do that on that span here, 37 00:01:57,890 --> 00:01:59,860 but also on the input. 38 00:01:59,860 --> 00:02:04,860 So here on this productNameInputElement 39 00:02:04,988 --> 00:02:09,988 here, I also want to reach out to classList 40 00:02:10,210 --> 00:02:12,003 and add warning. 41 00:02:13,900 --> 00:02:17,960 And with that, we can save this and now in index.html, 42 00:02:17,960 --> 00:02:22,650 we just need to make sure that we again import demo.js, 43 00:02:22,650 --> 00:02:25,830 so that we link to that script 44 00:02:25,830 --> 00:02:29,420 and then if you save this as well and you go back, 45 00:02:29,420 --> 00:02:34,420 you will notice that as soon as we go beneath 10 characters, 46 00:02:34,430 --> 00:02:36,820 this turns orange here, this number, 47 00:02:36,820 --> 00:02:38,900 and the background of the input field 48 00:02:38,900 --> 00:02:43,740 because we have that warning class added here. 49 00:02:43,740 --> 00:02:46,563 And also, of course, on that span. 50 00:02:48,440 --> 00:02:50,720 Now at the moment, it never goes away 51 00:02:50,720 --> 00:02:54,580 if we go above 10 again, because we have no logic for that, 52 00:02:54,580 --> 00:02:56,830 but that's something we'll dive in next. 53 00:02:56,830 --> 00:03:00,660 Here, however, we already see control structures in action 54 00:03:00,660 --> 00:03:03,573 and we also see why we often need them.