1 00:00:02,220 --> 00:00:04,000 The alternative way 2 00:00:04,000 --> 00:00:06,790 of using this style property, 3 00:00:06,790 --> 00:00:09,620 and then it's nested properties, 4 00:00:09,620 --> 00:00:14,620 would be that we maybe wanna set certain CSS classes 5 00:00:14,850 --> 00:00:16,950 on elements. 6 00:00:16,950 --> 00:00:21,030 And indeed I prepared some classes here. 7 00:00:21,030 --> 00:00:26,030 In styles.css, you will see if you scroll through that file, 8 00:00:27,040 --> 00:00:30,900 that there is this warning class, 9 00:00:30,900 --> 00:00:35,140 which I actually use in conjunction with the input element. 10 00:00:35,140 --> 00:00:37,710 And since there is no space in between, 11 00:00:37,710 --> 00:00:40,940 this means that I wanna select all input elements 12 00:00:40,940 --> 00:00:44,840 that have the warning class applied to them. 13 00:00:44,840 --> 00:00:47,730 Whereas if we had a blank in between, 14 00:00:47,730 --> 00:00:49,860 this would mean that I wanna select 15 00:00:49,860 --> 00:00:52,550 all the elements that have a warning class 16 00:00:52,550 --> 00:00:57,313 that are child or descendant elements of input. 17 00:00:58,390 --> 00:01:00,000 So here I have it without a blank, 18 00:01:00,000 --> 00:01:02,660 which means all inputs that have warning class 19 00:01:02,660 --> 00:01:04,260 added to them. 20 00:01:04,260 --> 00:01:06,570 And to same for remaining-chars. 21 00:01:06,570 --> 00:01:09,320 The element with the remaining-chars ID 22 00:01:09,320 --> 00:01:11,090 should receive this color 23 00:01:11,090 --> 00:01:13,990 if it also has the warning.css class 24 00:01:14,900 --> 00:01:18,080 and out of the box, this warning.css class 25 00:01:18,080 --> 00:01:23,080 is not added to the input or to this span with that ID. 26 00:01:23,190 --> 00:01:24,523 It's not added. 27 00:01:25,530 --> 00:01:29,440 But that means that if we do added with JavaScript, 28 00:01:29,440 --> 00:01:32,050 we should be able to apply the styles 29 00:01:32,050 --> 00:01:34,020 configured for this class, 30 00:01:34,020 --> 00:01:38,230 whenever the class is added with JavaScript 31 00:01:38,230 --> 00:01:41,620 and that's something we can also do here. 32 00:01:41,620 --> 00:01:44,930 For this all again, use my span element. 33 00:01:44,930 --> 00:01:47,920 And for this I'll quickly re-select it 34 00:01:47,920 --> 00:01:49,610 since this page updated. 35 00:01:49,610 --> 00:01:53,260 For that, I just wrote const span 36 00:01:53,260 --> 00:01:55,570 and then if I press the up arrow, 37 00:01:55,570 --> 00:02:00,150 it shows me previously used commands or code lines, 38 00:02:00,150 --> 00:02:01,950 and I can just auto complete them 39 00:02:01,950 --> 00:02:04,030 by hitting Tab and to save some time 40 00:02:04,030 --> 00:02:06,313 and then hit enter to execute it. 41 00:02:07,720 --> 00:02:10,759 Now you only need to do that if the page reloaded, 42 00:02:10,759 --> 00:02:13,220 because then that span element constant, 43 00:02:13,220 --> 00:02:17,990 which loss stored in memory or would be lost otherwise. 44 00:02:17,990 --> 00:02:19,530 Now we do have it back 45 00:02:19,530 --> 00:02:23,380 and now to change the CSS classes on that element, 46 00:02:23,380 --> 00:02:25,473 we've got two main ways of doing that. 47 00:02:26,320 --> 00:02:30,320 We do have to className property, 48 00:02:30,320 --> 00:02:32,543 so not class, but className. 49 00:02:33,770 --> 00:02:35,400 The reason is that class 50 00:02:35,400 --> 00:02:38,480 actually is a reserved word in JavaScript, 51 00:02:38,480 --> 00:02:41,240 we haven't used it yet, but it is a reserved word, 52 00:02:41,240 --> 00:02:43,130 fulfilling a certain purpose, 53 00:02:43,130 --> 00:02:46,763 and therefore does property has class name as a name. 54 00:02:47,950 --> 00:02:52,950 And className then can be set equal to a string value, 55 00:02:53,270 --> 00:02:57,620 which is basically the value for the class attribute 56 00:02:57,620 --> 00:02:59,763 that will be set on that element. 57 00:03:00,610 --> 00:03:05,070 So that could be 'first-class second-class' 58 00:03:05,070 --> 00:03:07,420 here using a dash is no problem 59 00:03:07,420 --> 00:03:09,690 since we're inside of a string. 60 00:03:09,690 --> 00:03:12,560 And if I set this, then for example, 61 00:03:12,560 --> 00:03:17,393 we would see that on this span, these classes were added. 62 00:03:18,240 --> 00:03:22,020 So whatever you set as a value for className 63 00:03:22,020 --> 00:03:26,040 will be added as the class attribute on that element 64 00:03:26,040 --> 00:03:27,753 for which you are setting it. 65 00:03:28,910 --> 00:03:31,270 And that's one way of setting classes. 66 00:03:31,270 --> 00:03:33,380 And of course, therefore we could set it 67 00:03:33,380 --> 00:03:36,810 to a different string 68 00:03:36,810 --> 00:03:39,780 where we don't say first class, second class, 69 00:03:39,780 --> 00:03:41,203 but instead warning. 70 00:03:42,270 --> 00:03:45,950 Now I would override my classes on that element 71 00:03:45,950 --> 00:03:48,560 with that new class string, 72 00:03:48,560 --> 00:03:51,430 in this case with only one class therefore. 73 00:03:51,430 --> 00:03:56,010 And if I hit Enter, you'll notice that this got orange. 74 00:03:56,010 --> 00:03:58,890 Because if we inspect this again, 75 00:03:58,890 --> 00:04:01,790 we now see that class is set to warning 76 00:04:02,670 --> 00:04:04,630 and first-class and second class 77 00:04:04,630 --> 00:04:06,380 were overwritten therefore, 78 00:04:06,380 --> 00:04:10,000 and that then in turn has this affect 79 00:04:10,000 --> 00:04:13,450 that this css rule is becoming active 80 00:04:13,450 --> 00:04:16,713 and is applying this color to this element. 81 00:04:17,620 --> 00:04:19,829 That's just CSS rule 82 00:04:19,829 --> 00:04:23,453 which I showed you a couple of seconds ago, this one here. 83 00:04:25,000 --> 00:04:29,773 And that's one way of setting CSS classes with JavaScript. 84 00:04:31,010 --> 00:04:35,730 This approaches often great, but it has a disadvantage. 85 00:04:35,730 --> 00:04:38,510 If you are doing this on an element 86 00:04:38,510 --> 00:04:42,150 that already has a class, which is not the case here, 87 00:04:42,150 --> 00:04:45,390 but if you already had a class on that element, 88 00:04:45,390 --> 00:04:50,160 let's say this span here already had a class attribute 89 00:04:50,160 --> 00:04:53,820 with some class, which has redundant here, 90 00:04:53,820 --> 00:04:57,390 but let's say we had this class for some reason already. 91 00:04:57,390 --> 00:05:02,150 Then whenever you do override it. 92 00:05:02,150 --> 00:05:05,160 So if I re select my span element here, 93 00:05:05,160 --> 00:05:10,160 and I then overwrite className with warning, 94 00:05:10,350 --> 00:05:13,930 then this warning class would be applied, 95 00:05:13,930 --> 00:05:15,983 but we see the old class. 96 00:05:16,960 --> 00:05:21,010 Some class is missing now, it was overwritten. 97 00:05:21,010 --> 00:05:24,090 And that might sometimes be what you want, 98 00:05:24,090 --> 00:05:27,070 but sometimes it's also not what you want. 99 00:05:27,070 --> 00:05:29,310 Now, the solution for this would be 100 00:05:29,310 --> 00:05:31,690 that you set className= 'warning,' 101 00:05:31,690 --> 00:05:33,970 and then the class which you wanna persist. 102 00:05:33,970 --> 00:05:36,320 So what you don't wanna lose. 103 00:05:36,320 --> 00:05:38,970 But that of course means that you always need to remember 104 00:05:38,970 --> 00:05:41,770 which classes are already on that element, 105 00:05:41,770 --> 00:05:44,970 or you always need to write some extra code 106 00:05:44,970 --> 00:05:48,810 that looks at the element, extracts the existing classes, 107 00:05:48,810 --> 00:05:51,900 and then appends a new class. 108 00:05:51,900 --> 00:05:53,580 And that gets even more annoying 109 00:05:53,580 --> 00:05:55,530 if you then want to remove a class, 110 00:05:55,530 --> 00:06:00,120 because then you have to the existing string of class names 111 00:06:00,120 --> 00:06:03,600 with a new string, which is all the old class names 112 00:06:03,600 --> 00:06:06,090 minus the one you wanna remove. 113 00:06:06,090 --> 00:06:09,280 It's all doable, but it can be annoying. 114 00:06:09,280 --> 00:06:11,640 That's why, in addition to className, 115 00:06:11,640 --> 00:06:14,453 we also have the classList property. 116 00:06:15,350 --> 00:06:17,830 And classList actually is an object 117 00:06:17,830 --> 00:06:20,210 with a couple of utility methods 118 00:06:20,210 --> 00:06:24,913 that make managing classes on HTML elements easy. 119 00:06:26,060 --> 00:06:28,240 For example, you have add method, 120 00:06:28,240 --> 00:06:30,030 which you can execute like this, 121 00:06:30,030 --> 00:06:34,010 to which you pass a string, which contains the className 122 00:06:34,010 --> 00:06:37,983 or a classNames, which you wanna add, like warning. 123 00:06:39,310 --> 00:06:41,440 And now that we'll add this 124 00:06:41,440 --> 00:06:44,930 and we also have a remove method 125 00:06:44,930 --> 00:06:48,110 which removes the className which you're passing here 126 00:06:48,110 --> 00:06:50,863 and only that class, no other classNames. 127 00:06:53,160 --> 00:06:55,838 So here with that, if we now inspect this again 128 00:06:55,838 --> 00:06:59,143 after executing the remove, you see this is gone. 129 00:07:00,070 --> 00:07:02,330 And if I would reload this entire page 130 00:07:02,330 --> 00:07:07,330 so that some class is set since this is set initially here, 131 00:07:07,810 --> 00:07:12,293 if I now would get access to my spanElement again, 132 00:07:13,520 --> 00:07:18,520 if I then first of all, execute classList.add 'warning' 133 00:07:19,980 --> 00:07:21,083 like this. 134 00:07:22,440 --> 00:07:25,640 Then if we inspect this again, 135 00:07:25,640 --> 00:07:28,600 we see that some class is still there, 136 00:07:28,600 --> 00:07:30,933 but in addition, warning was added. 137 00:07:32,140 --> 00:07:36,350 And if I go back and I remove warning. 138 00:07:36,350 --> 00:07:40,160 So if I change, add to remove here and execute this, 139 00:07:40,160 --> 00:07:43,090 then hopefully and surprisingly, 140 00:07:43,090 --> 00:07:45,700 we see that some class is still there 141 00:07:45,700 --> 00:07:47,433 and warning was removed. 142 00:07:49,060 --> 00:07:52,870 And therefore you can also change classes 143 00:07:52,870 --> 00:07:56,030 besides those styles, with the style attribute 144 00:07:56,030 --> 00:08:01,030 either by using className, to override the class attribute 145 00:08:01,550 --> 00:08:06,350 or classList to manage it in a more elegant way. 146 00:08:06,350 --> 00:08:10,110 And often classList of course, it's the better choice 147 00:08:10,110 --> 00:08:14,363 since you have more fine grain control over what's going on. 148 00:08:15,200 --> 00:08:19,250 And that's how you can change styling of elements. 149 00:08:19,250 --> 00:08:22,150 And of course not just of span elements, 150 00:08:22,150 --> 00:08:26,513 but of any elements that you can style with CSS. 151 00:08:27,820 --> 00:08:31,370 Now, that's also the conjunction of CSS and JavaScript, 152 00:08:31,370 --> 00:08:34,460 and we see how these two languages work together 153 00:08:34,460 --> 00:08:38,803 with help of style and of these class properties. 154 00:08:39,880 --> 00:08:44,100 Now let's move on to the conditional part 155 00:08:44,100 --> 00:08:46,700 because now that we know how we can add 156 00:08:46,700 --> 00:08:48,620 and remove the warning class, 157 00:08:48,620 --> 00:08:51,200 we of course wanna do that conditionally 158 00:08:51,200 --> 00:08:55,150 based on the amount of characters the user entered. 159 00:08:55,150 --> 00:08:56,560 We only wanna do that 160 00:08:56,560 --> 00:08:59,743 if there are less than 10 remaining characters.