1 00:00:02,070 --> 00:00:05,450 Now we got our first if statement in action 2 00:00:05,450 --> 00:00:07,310 that does something useful. 3 00:00:07,310 --> 00:00:08,710 It adds these classes 4 00:00:08,710 --> 00:00:11,760 if we have less than 10 remaining characters. 5 00:00:11,760 --> 00:00:13,810 But at the moment with that, of course, 6 00:00:13,810 --> 00:00:18,810 whenever we go beneath 10 characters that works as expected, 7 00:00:19,060 --> 00:00:22,480 but if we go above 10 remaining characters again, 8 00:00:22,480 --> 00:00:25,020 then the warning class is not removed. 9 00:00:25,020 --> 00:00:26,450 It's still applied 10 00:00:26,450 --> 00:00:29,303 and therefore we still have this orange color. 11 00:00:30,430 --> 00:00:32,740 Now that's working as expected 12 00:00:32,740 --> 00:00:34,440 because with this if statement, 13 00:00:34,440 --> 00:00:36,640 we only add the warning class, 14 00:00:36,640 --> 00:00:39,620 we have no code that would remove it. 15 00:00:39,620 --> 00:00:42,630 And just because this code doesn't run 16 00:00:42,630 --> 00:00:45,330 with every execution of this function, 17 00:00:45,330 --> 00:00:49,100 does not mean that past executions of this code 18 00:00:49,100 --> 00:00:53,350 would be undone if it does not run again in the future. 19 00:00:53,350 --> 00:00:55,260 So if this code ran once, 20 00:00:55,260 --> 00:00:59,460 because we went beneath 10 characters once, that's enough, 21 00:00:59,460 --> 00:01:02,410 the class has been added and it will not be undone 22 00:01:02,410 --> 00:01:04,940 unless we reload this entire site 23 00:01:04,940 --> 00:01:09,100 and therefore restart our JavaScript code, so to say, 24 00:01:09,100 --> 00:01:12,780 as we restart everything on this page. 25 00:01:12,780 --> 00:01:15,770 So if we wanna remove this warning class 26 00:01:15,770 --> 00:01:19,050 as soon as we are above 10 characters again, 27 00:01:19,050 --> 00:01:22,740 we need to alter this if statement a little bit, 28 00:01:22,740 --> 00:01:26,180 and we need to add a so called else statement, 29 00:01:26,180 --> 00:01:28,313 an else branch to it. 30 00:01:29,230 --> 00:01:33,210 Because that's another key feature of if statements, 31 00:01:33,210 --> 00:01:34,900 not just in JavaScript, 32 00:01:34,900 --> 00:01:38,950 but again, in basically every programming language. 33 00:01:38,950 --> 00:01:41,870 You cannot just define a condition 34 00:01:41,870 --> 00:01:44,130 and then code that should be executed 35 00:01:44,130 --> 00:01:46,320 if the condition is met, 36 00:01:46,320 --> 00:01:50,550 but you can also define code that should be executed 37 00:01:50,550 --> 00:01:53,350 if that condition is not met. 38 00:01:53,350 --> 00:01:57,880 And you do this by adding the else keyword here, 39 00:01:57,880 --> 00:02:01,340 right after the closing curly brace 40 00:02:01,340 --> 00:02:04,430 of that if statement code block, 41 00:02:04,430 --> 00:02:08,483 and then you again, add opening and closing curly braces. 42 00:02:09,430 --> 00:02:12,080 And now we extended this if statement 43 00:02:12,080 --> 00:02:14,520 and we added such an else branch. 44 00:02:14,520 --> 00:02:16,470 And now you can put code 45 00:02:16,470 --> 00:02:19,510 into that else branch code block here, 46 00:02:19,510 --> 00:02:21,350 between these curly braces, 47 00:02:21,350 --> 00:02:23,830 to execute that code only 48 00:02:23,830 --> 00:02:27,253 if that condition here should not be met. 49 00:02:28,320 --> 00:02:30,420 Now you don't need an else branch 50 00:02:30,420 --> 00:02:32,420 for every if statement you write. 51 00:02:32,420 --> 00:02:35,400 It simply depends on what you wanna achieve, 52 00:02:35,400 --> 00:02:38,940 but very often such a else branch can be useful 53 00:02:38,940 --> 00:02:41,463 to execute some alternative code. 54 00:02:42,370 --> 00:02:45,303 And here the alternative code would be 55 00:02:45,303 --> 00:02:48,900 that we wanna remove the warning class, 56 00:02:48,900 --> 00:02:53,733 So by calling the remove method instead of the add method. 57 00:02:54,890 --> 00:02:57,020 And the great thing about remove, by the way, 58 00:02:57,020 --> 00:02:58,960 is that if it should run, 59 00:02:58,960 --> 00:03:02,360 when no warning class has been added yet, 60 00:03:02,360 --> 00:03:04,860 it will just not do anything. 61 00:03:04,860 --> 00:03:08,550 So it won't cause an error or anything like that 62 00:03:08,550 --> 00:03:10,970 if it finds no warning class. 63 00:03:10,970 --> 00:03:14,340 But if it does find one, once this code executes, 64 00:03:14,340 --> 00:03:16,273 this warning class will be removed. 65 00:03:18,020 --> 00:03:21,300 And now with such an else branch added here, 66 00:03:21,300 --> 00:03:24,113 if you save that code again and you go back, 67 00:03:24,950 --> 00:03:26,100 you can see that 68 00:03:26,100 --> 00:03:29,333 if I type something into this input field here, 69 00:03:30,290 --> 00:03:32,730 now the warning class has been added. 70 00:03:32,730 --> 00:03:35,470 But if I remove characters here, 71 00:03:35,470 --> 00:03:39,250 then as soon as I'm greater than 10, 72 00:03:39,250 --> 00:03:41,310 you see the styles change 73 00:03:41,310 --> 00:03:44,140 because that warning class was removed. 74 00:03:44,140 --> 00:03:46,820 And you can see it flash here on the right 75 00:03:46,820 --> 00:03:49,420 as the warning class is added to the DOM, 76 00:03:49,420 --> 00:03:53,090 so to the parsed and displayed HTML content, 77 00:03:53,090 --> 00:03:55,533 and as it is removed thereafter. 78 00:03:56,370 --> 00:03:58,903 And that's now working the way it should. 79 00:04:00,040 --> 00:04:03,230 But an else branch is not all you can add. 80 00:04:03,230 --> 00:04:06,360 Sometimes you even have different conditions 81 00:04:06,360 --> 00:04:07,790 which you wanna check. 82 00:04:07,790 --> 00:04:11,230 Maybe we wanna add a brand new class. 83 00:04:11,230 --> 00:04:13,890 If we have no remaining characters, 84 00:04:13,890 --> 00:04:16,630 maybe we wanna add a red background then, 85 00:04:16,630 --> 00:04:18,920 and we wanna add the warning class 86 00:04:18,920 --> 00:04:20,480 if we have less than 10 87 00:04:20,480 --> 00:04:24,133 and no class if we have more than 10 remaining characters. 88 00:04:25,470 --> 00:04:26,770 To achieve this, 89 00:04:26,770 --> 00:04:29,230 we could change this code and say that 90 00:04:29,230 --> 00:04:33,380 if remaining characters is equal to zero, 91 00:04:33,380 --> 00:04:36,560 using the triple equal sign comparison operators, 92 00:04:36,560 --> 00:04:38,940 since this is a best practice, 93 00:04:38,940 --> 00:04:41,483 so a pattern you should typically follow. 94 00:04:42,670 --> 00:04:45,820 And with that, we would now only execute this code 95 00:04:45,820 --> 00:04:48,670 if remaining characters is equal to zero. 96 00:04:48,670 --> 00:04:49,880 Now let's say in this case, 97 00:04:49,880 --> 00:04:52,800 we wanna add an error class here, 98 00:04:52,800 --> 00:04:55,723 not a warning class, but an error class. 99 00:04:56,620 --> 00:05:00,460 Now this is a class we have yet to add in our CSS code, 100 00:05:00,460 --> 00:05:03,820 so let's quickly go there to style CSS 101 00:05:03,820 --> 00:05:07,380 and maybe duplicate these two rules. 102 00:05:07,380 --> 00:05:09,590 So copy and paste them, 103 00:05:09,590 --> 00:05:14,210 but replace warning with error here, like this, 104 00:05:16,150 --> 00:05:19,017 and now let's pick more reddish colors. 105 00:05:20,879 --> 00:05:23,840 So here I'll go more into the red color area 106 00:05:23,840 --> 00:05:27,690 and have a light red color as an input background. 107 00:05:27,690 --> 00:05:31,953 And here have a red color as a span text color. 108 00:05:33,560 --> 00:05:35,920 And that's now this error class, 109 00:05:35,920 --> 00:05:39,593 which will be added if we have zero remaining characters. 110 00:05:41,100 --> 00:05:41,933 And with that, 111 00:05:41,933 --> 00:05:44,200 we, of course, wanna remove that error class 112 00:05:44,200 --> 00:05:49,200 if we have more than zero remaining characters, 113 00:05:49,960 --> 00:05:52,010 but, and that's not a tricky thing, 114 00:05:52,010 --> 00:05:56,400 we also wanna have a condition in between zero 115 00:05:56,400 --> 00:05:58,430 and this else block here. 116 00:05:58,430 --> 00:05:59,263 And for that, 117 00:05:59,263 --> 00:06:02,270 we can also add an else if statement 118 00:06:02,270 --> 00:06:04,310 to add multiple conditions 119 00:06:04,310 --> 00:06:06,903 that are evaluated step-by-step. 120 00:06:07,960 --> 00:06:11,680 For this, we add else if like this, 121 00:06:11,680 --> 00:06:15,130 after the closing curly brace of the if block. 122 00:06:15,130 --> 00:06:17,940 And then we add opening and closing curly braces 123 00:06:17,940 --> 00:06:20,520 to define the code that should be executed 124 00:06:20,520 --> 00:06:23,490 if some other condition is met. 125 00:06:23,490 --> 00:06:26,740 And to add this other condition, 126 00:06:26,740 --> 00:06:28,600 we also add parentheses here 127 00:06:28,600 --> 00:06:31,420 to put our condition between those parentheses 128 00:06:32,850 --> 00:06:35,350 and then this else keyword here 129 00:06:35,350 --> 00:06:39,743 goes after the closing curly brace of the else if branch. 130 00:06:40,910 --> 00:06:43,610 Here we can now define another condition. 131 00:06:43,610 --> 00:06:44,443 For example, 132 00:06:44,443 --> 00:06:48,890 that remaining characters is smaller or equal than 10. 133 00:06:48,890 --> 00:06:51,240 So what we had before. 134 00:06:51,240 --> 00:06:54,310 And in that case, I'll copy this code. 135 00:06:54,310 --> 00:06:59,310 In that case, we can add this warning class here like that. 136 00:07:00,930 --> 00:07:02,880 And in the else branch we therefore now 137 00:07:02,880 --> 00:07:06,440 don't just wanna remove the error class, 138 00:07:06,440 --> 00:07:11,440 but we also wanna remove the warning class like this. 139 00:07:14,500 --> 00:07:17,110 By the way, you can also rewrite this 140 00:07:17,110 --> 00:07:21,040 and simply pass multiple parameter values to remove 141 00:07:21,040 --> 00:07:24,170 and pass all the classes you wanna remove 142 00:07:24,170 --> 00:07:27,210 as individual class names like this, 143 00:07:27,210 --> 00:07:28,213 that will also work. 144 00:07:29,850 --> 00:07:33,600 Now with that, we added our else if condition. 145 00:07:33,600 --> 00:07:36,880 And how will this overall conditional block 146 00:07:36,880 --> 00:07:39,883 now be evaluated by JavaScript? 147 00:07:40,880 --> 00:07:43,060 Well, it always starts at the top. 148 00:07:43,060 --> 00:07:45,910 That's always how your JavaScript code executes, 149 00:07:45,910 --> 00:07:47,710 top to bottom. 150 00:07:47,710 --> 00:07:50,323 And it first of all has a look at this condition. 151 00:07:51,320 --> 00:07:53,260 If this condition is met, 152 00:07:53,260 --> 00:07:57,640 we go in here and the rest of this if block is ignored. 153 00:07:57,640 --> 00:08:00,530 So the else if and the else statement will be ignored 154 00:08:00,530 --> 00:08:02,483 if this first condition is met. 155 00:08:03,560 --> 00:08:05,220 If it's not met, 156 00:08:05,220 --> 00:08:08,960 so if we have more than zero remaining characters, 157 00:08:08,960 --> 00:08:11,550 it will move on to this else if condition 158 00:08:11,550 --> 00:08:14,150 and evaluate this condition. 159 00:08:14,150 --> 00:08:16,180 If this condition is met now, 160 00:08:16,180 --> 00:08:18,810 it goes in here and executes this code 161 00:08:18,810 --> 00:08:21,450 and ignores the else block. 162 00:08:21,450 --> 00:08:24,850 If this condition here is also not met, 163 00:08:24,850 --> 00:08:27,800 then this code is, of course, not executed 164 00:08:27,800 --> 00:08:30,820 and instead JavaScript moves on to the else block 165 00:08:30,820 --> 00:08:32,972 and executes that code instead. 166 00:08:34,070 --> 00:08:37,350 And therefore with that if we save all of this, 167 00:08:37,350 --> 00:08:40,919 if I start typing here, initially nothing happens. 168 00:08:40,919 --> 00:08:43,210 But if I go below 10 characters, 169 00:08:43,210 --> 00:08:45,810 I have my old warning class added. 170 00:08:45,810 --> 00:08:48,633 If I go above 10 characters, it's still removed. 171 00:08:49,720 --> 00:08:51,440 And if I go to zero characters, 172 00:08:51,440 --> 00:08:54,810 I have that error class added in addition, 173 00:08:54,810 --> 00:08:56,860 hence I have that red background 174 00:08:56,860 --> 00:08:58,623 and that red color here. 175 00:08:59,750 --> 00:09:04,750 But if I go above 10 again, both is removed. 176 00:09:05,800 --> 00:09:08,530 Now the error class is actually not removed 177 00:09:08,530 --> 00:09:11,400 as soon as I am above zero 178 00:09:11,400 --> 00:09:14,500 because we only execute this remove command 179 00:09:14,500 --> 00:09:15,760 in the else branch, 180 00:09:15,760 --> 00:09:19,680 so only if we also are greater than 10. 181 00:09:19,680 --> 00:09:22,370 If you would want to remove the error class 182 00:09:22,370 --> 00:09:23,960 as soon as possible, 183 00:09:23,960 --> 00:09:27,000 you would have to add that remove code here 184 00:09:27,000 --> 00:09:29,800 to this else if branch. 185 00:09:29,800 --> 00:09:32,130 So we would have to copy that 186 00:09:32,130 --> 00:09:35,400 and remove error, and only error, 187 00:09:35,400 --> 00:09:38,590 as soon as we are inside of this block 188 00:09:39,600 --> 00:09:42,870 and only remove warning down here 189 00:09:42,870 --> 00:09:44,623 if we are in the else block. 190 00:09:46,080 --> 00:09:48,140 With those adjustments made, 191 00:09:48,140 --> 00:09:51,350 now you would see that if we enter something here, 192 00:09:51,350 --> 00:09:53,220 if we enter some text, 193 00:09:53,220 --> 00:09:55,120 now the error class is removed 194 00:09:55,120 --> 00:09:57,850 as soon as we have at least one remaining character 195 00:09:57,850 --> 00:09:58,970 and warning is removed 196 00:09:58,970 --> 00:10:00,273 if we are above 10. 197 00:10:01,840 --> 00:10:04,100 And that's how we can run code conditionally 198 00:10:04,100 --> 00:10:05,640 with if statements 199 00:10:05,640 --> 00:10:09,700 and how we can use extra features like else if and else, 200 00:10:09,700 --> 00:10:10,773 if we need them.