WEBVTT 0 00:00.370 --> 00:01.930 Did you give it a go? 1 00:02.470 --> 00:02.890 Don't worry 2 00:02.890 --> 00:07.090 if you couldn't do it. We're going to be running through the entire solution video right now. 3 00:07.090 --> 00:08.560 So here we are, where we left off. 4 00:08.590 --> 00:13.870 We've got this checkbox, but obviously now nothing happens when we check it on and off, we've got 5 00:13.870 --> 00:15.610 our file and I ran through the HTML. 6 00:15.640 --> 00:18.400 We've just got our script tags here with nothing in it. 7 00:18.400 --> 00:19.920 So what do we do? 8 00:19.930 --> 00:24.910 Well, we've got to listen for an event specifically, I want to listen for a change event. 9 00:25.120 --> 00:27.100 Where do we listen for that change event? 10 00:27.130 --> 00:28.420 Well, look at our browser. 11 00:29.460 --> 00:29.840 That's right. 12 00:29.850 --> 00:33.390 We're listening for the change event on this checkbox. 13 00:33.840 --> 00:36.180 That's where the change event is going to be fired from. 14 00:36.180 --> 00:39.100 And when that's fired, we want to do 2 things right. 15 00:39.120 --> 00:43.620 The first thing we want to do is we want to remove the disabled attribute on all those inputs. 16 00:43.620 --> 00:49.170 And the second thing we want to do is we kind of want to remove that disabled class styling. 17 00:49.380 --> 00:55.020 So if we scroll up in our code, we can see that we've got this label and on the label we've got a class 18 00:55.020 --> 00:56.670 called disabled-label. 19 00:57.350 --> 00:59.090 Right now, the disabled-label, 20 00:59.090 --> 01:03.470 if we just go here, we've just given the label a certain color. 21 01:03.680 --> 01:07.340 So all we want to do is we want to remove that styling, that class. 22 01:07.580 --> 01:11.180 So those are the two things we want to do, and it really isn't that difficult. 23 01:11.210 --> 01:14.660 Let me now remove myself so I don't block any code. 24 01:15.260 --> 01:16.850 All right, let's begin. 25 01:16.850 --> 01:17.830 What's the first step? 26 01:17.840 --> 01:21.520 The first step is to grab that checkbox, because that's where it all begins, right? 27 01:21.530 --> 01:24.920 We're listening for a change event on that checkbox. 28 01:25.190 --> 01:30.590 So let's grab our checkbox, where it all begins. 29 01:31.010 --> 01:32.210 How do we do that? 30 01:32.240 --> 01:33.400 Well, it's very easy. 31 01:33.410 --> 01:36.190 Let's define a variable in JavaScript by using the let keyword. 32 01:36.200 --> 01:38.990 Let's just call it checkbox for lack of a better word. 33 01:39.020 --> 01:43.670 We can access this checkbox by starting at our document object. On here, 34 01:43.670 --> 01:49.970 we've got getElementById(), and the ID we gave it was billing-checkbox. 35 01:50.570 --> 01:52.640 Let me just confirm it is billing-checkbox. 36 01:52.640 --> 01:59.450 If we scroll up, there's our input of type checkbox with an ID of billing-checkbox. 37 02:00.620 --> 02:01.410 So there we go. 38 02:01.430 --> 02:03.530 We've got that checkbox in a variable. 39 02:03.650 --> 02:10.190 The next step is, is let's add the change event listener. 40 02:11.510 --> 02:11.750 Right. 41 02:11.750 --> 02:13.460 We want to listen for an event. 42 02:13.910 --> 02:16.760 We do that by accessing our checkbox element, 43 02:16.760 --> 02:21.890 and on here the DOM gives us access to a method called addEventListener(). 44 02:21.920 --> 02:26.240 We want to listen for the change event, and when this change event is fired, 45 02:26.240 --> 02:30.830 the second argument to this method is a callback function. 46 02:30.830 --> 02:37.430 It's something we want to execute when we hear that change event. And let's just call our function, 47 02:37.460 --> 02:38.390 toggle ... 48 02:39.090 --> 02:40.380 toggleBilling. 49 02:41.680 --> 02:43.870 We could call it anything we want. 50 02:43.900 --> 02:47.710 The final step is let's define the function 51 02:48.440 --> 02:50.920 called toggleBilling. 52 02:51.590 --> 02:54.110 It really, really is this easy. 53 02:54.200 --> 02:56.180 How do we define a function in JavaScript? 54 02:56.210 --> 02:56.780 Easy. 55 02:56.810 --> 02:58.730 We just use the "function" keyword. 56 02:58.790 --> 03:01.430 This is a reserved word in JavaScript. 57 03:01.460 --> 03:07.650 Next, we've got to define the function that we are creating and we called it toggleBilling. 58 03:07.670 --> 03:13.490 You define a function by following it with parentheses, and then all your business logic and code resides 59 03:13.490 --> 03:15.350 within these curly braces. 60 03:15.500 --> 03:16.670 And this is working. 61 03:16.670 --> 03:17.330 Let me prove it to you. 62 03:17.330 --> 03:18.530 Let's just console log 63 03:18.530 --> 03:19.100 "hi". 64 03:20.150 --> 03:24.980 So every time this change event is fired, this toggleBilling function will be fired. 65 03:24.980 --> 03:27.230 And in the toggleBilling function we've just got console.log 66 03:27.230 --> 03:27.710 "hi". 67 03:27.890 --> 03:30.720 And I know I'm going slow, but it's important to understand this. 68 03:30.740 --> 03:32.130 Let's go to the console. 69 03:32.150 --> 03:38.150 Let's now start toggling this on and off, and you can see every time we do "hi" gets consoled. 70 03:38.300 --> 03:38.900 Got it. 71 03:38.900 --> 03:40.190 So we know it's working. 72 03:40.310 --> 03:41.840 So let's delete this console. 73 03:42.170 --> 03:43.910 What do we want to do? 74 03:43.940 --> 03:49.040 Well, firstly, we need to select all billing items. 75 03:49.850 --> 03:51.200 Or should I call them billing inputs? 76 03:51.230 --> 03:52.520 Let me call them billing inputs, 77 03:52.520 --> 03:53.150 right. 78 03:53.300 --> 03:55.340 If we scroll up in our code, 79 03:56.830 --> 03:59.530 'm wanting to grab both of those inputs. 80 03:59.560 --> 04:00.280 There's two of them. 81 04:00.280 --> 04:01.780 There could even be more in your site. 82 04:01.810 --> 04:03.580 They could be a whole lot more. 83 04:03.580 --> 04:05.620 So it's going to be a collection. 84 04:05.620 --> 04:07.030 That's something you need to realize. 85 04:07.030 --> 04:12.850 And then we're going to loop through that collection, and we're either going to remove or add that disabled 86 04:12.850 --> 04:13.690 attribute. 87 04:13.720 --> 04:14.500 Have you got it? 88 04:15.280 --> 04:20.400 Okay, so how do we then put all of these billing inputs into a collection? 89 04:20.410 --> 04:21.940 Well, let's define a variable. 90 04:21.940 --> 04:24.190 Let's just call it billingInputs. 91 04:24.310 --> 04:28.840 And we can access this collection by accessing our document object. 92 04:28.840 --> 04:35.710 On here, we've got querySelectorAll(), and this will return a collection, specifically a NodeList 93 04:35.710 --> 04:36.460 collection. 94 04:36.460 --> 04:37.600 And let me prove it to you. 95 04:37.630 --> 04:38.820 We want to select what? 96 04:38.830 --> 04:43.750 Well, we want to select all items with an ID of billing. 97 04:44.440 --> 04:47.710 Remember, this is actually done on the parent. 98 04:47.740 --> 04:48.640 Let me show you. 99 04:48.640 --> 04:52.180 So on the parent fieldset, we've got an ID of billing. 100 04:53.760 --> 04:56.790 Then this just works just like normal CSS selectors. 101 04:56.790 --> 04:59.370 So we're using a space to denote a child. 102 05:00.180 --> 05:06.210 The child we want is an input, but not all inputs, just with type of text. 103 05:06.420 --> 05:09.660 So we're being very, very explicit here as to what we want. 104 05:09.660 --> 05:13.580 And as I mentioned, this will return a collection and I'll prove it to you. 105 05:13.590 --> 05:17.880 Let's console log billingInputs to the screen. 106 05:17.880 --> 05:19.080 So let's go to our browser, 107 05:20.530 --> 05:21.460 access our console, 108 05:22.840 --> 05:25.480 and let's toggle this off ... and there's our NodeList. 109 05:25.480 --> 05:29.950 And if we open up our NodeList, how interesting is that? 110 05:29.980 --> 05:34.960 We've got our inputs. And you'll notice that there is a length property here. 111 05:35.260 --> 05:41.380 This is given to us by the DOM, so we can easily access this length which we will have to access because 112 05:41.380 --> 05:45.040 we need to know how many times to loop through this collection. 113 05:45.160 --> 05:46.600 Well, let me say it in another way. 114 05:46.600 --> 05:48.340 We need to know how many items are in here, 115 05:48.340 --> 05:53.740 so when we run our for...loop, which I'm going to be doing now, we know how many times it needs to run. 116 05:54.010 --> 05:54.550 Okay. 117 05:54.610 --> 05:55.660 Very, very simple. 118 05:56.610 --> 05:56.870 Whew. 119 05:57.000 --> 05:57.780 I know, I know. 120 05:57.780 --> 06:00.510 I'm going a bit slow, but I want you to follow along. 121 06:00.510 --> 06:02.030 So we've got our billingInputs, 122 06:02.040 --> 06:02.400 okay. 123 06:02.430 --> 06:06.930 Let's just deal with one thing at a time. Before we deal with the class, adding and removing that, 124 06:06.930 --> 06:08.700 I want to just finish with this billingInputs. 125 06:08.700 --> 06:12.060 I want us to remove and add that disabled attribute. 126 06:12.090 --> 06:12.870 How do we do that? 127 06:12.870 --> 06:18.270 Well, we need to loop through the entire input collection. 128 06:19.460 --> 06:22.970 And on each loop we want to add or remove 129 06:24.100 --> 06:26.760 the disabled attribute. 130 06:26.770 --> 06:27.970 That's what we want to do now. 131 06:27.970 --> 06:29.290 And how do we do it? 132 06:29.410 --> 06:31.540 Well, it is very, very simple. 133 06:31.690 --> 06:34.780 We just need to use the for...loop. 134 06:34.780 --> 06:36.460 The for...loop is very simple. 135 06:36.700 --> 06:38.740 Let me not confuse you with all the all the words first. 136 06:38.740 --> 06:39.400 I'll walk you through it. 137 06:39.400 --> 06:44.890 So in order to do a for...loop, we need to use the "for" reserved word in JavaScript. 138 06:44.890 --> 06:47.020 And it takes 3 arguments. 139 06:47.020 --> 06:51.010 The first argument is we need to keep track of how many times we loop. 140 06:51.010 --> 06:54.460 Otherwise it's going to loop forever and it will never stop. 141 06:54.490 --> 06:55.600 It'll be a problem. 142 06:55.840 --> 07:02.380 And we normally loop through by defining a variable and the variable needs to start somewhere. 143 07:02.380 --> 07:07.570 So let's say we define a variable as "i", starting at zero because we want a loop to start at zero. 144 07:07.600 --> 07:10.840 The second argument to this for...loop is what? 145 07:10.870 --> 07:20.380 Well, we have to tell the JavaScript parser when to stop, and we need to stop when "i" is less than billingInputs 146 07:20.380 --> 07:21.160 billingInputs, 147 07:21.280 --> 07:23.770 remember that? And remember we saw a length property. 148 07:24.760 --> 07:25.450 Right. 149 07:25.540 --> 07:28.180 So we know that "i" starts at zero. 150 07:28.180 --> 07:34.480 And in order to access the first item in a list in JavaScript, we use square bracket notation zero, 151 07:34.510 --> 07:37.240 that accesses the first item in a collection. 152 07:37.450 --> 07:39.370 That's just the syntax of JavaScript. 153 07:39.370 --> 07:45.760 So we know at zero we're accessing the first input, then the second loop we want to increase "i" to 1, 154 07:45.790 --> 07:50.290 then it's going to access the second input in the collection and then it's going to hit this 155 07:50.290 --> 07:52.000 "i" is less than billingInputs length, 156 07:52.000 --> 07:52.570 so 157 07:53.310 --> 07:55.560 when "i" gets to 2, that's going to be false 158 07:55.560 --> 07:57.690 and then we don't loop through this anymore. 159 07:57.690 --> 07:59.730 So that's why it will put a stop to it. 160 07:59.880 --> 08:01.380 It'll be a finite loop. 161 08:01.380 --> 08:06.210 In other words, the final argument to this for...loop is what happens at the end of each loop. 162 08:06.210 --> 08:11.280 Well, at the end of each loop we just want to increase the variable "i"'s value by one, and we denote 163 08:11.280 --> 08:13.890 that by two pluses (++) in JavaScript. 164 08:14.190 --> 08:15.420 So there we go. 165 08:15.420 --> 08:17.100 It is that simple. 166 08:18.090 --> 08:24.240 Now all we want to do, is if the disabled property is set to true, 167 08:25.500 --> 08:32.220 we want to set it to false and vice versa. 168 08:33.670 --> 08:35.000 Right, that's the goal. 169 08:35.020 --> 08:35.860 How do we do that? 170 08:35.860 --> 08:38.920 Well, all we need to do is access our billingInputs. 171 08:39.570 --> 08:48.570 We want to access the first item in that input when "i" is zero and then the second when "i" is one. 172 08:48.600 --> 08:52.440 Then we want to access the disabled attribute of that input. 173 08:53.180 --> 08:54.350 And what do we want to do? 174 08:54.380 --> 08:58.400 Well, in JavaScript we've got this exclamation mark which basically just gives you the opposite. 175 08:58.430 --> 09:00.170 It's another word for not. 176 09:00.410 --> 09:04.640 And then of course, we want to exactly access the same thing. 177 09:04.790 --> 09:08.810 So basically what we're doing ... disabled I spelled that wrong. 178 09:10.970 --> 09:15.800 So basically here, what we are doing, is we are accessing the disabled property. 179 09:15.800 --> 09:20.510 So it's either going to be true or false, that disabled attribute, and then we're going to set it 180 09:20.510 --> 09:21.680 to the complete opposite. 181 09:21.680 --> 09:26.660 So on the first iteration, we know the disabled property is going to be set to true, but we're going 182 09:26.660 --> 09:28.970 to assign it the value of false. 183 09:29.000 --> 09:32.510 So we're going to dynamically update the disabled attribute. 184 09:32.810 --> 09:33.680 Let me show you what I mean. 185 09:33.680 --> 09:36.740 Let's go to the browser and now let's toggle this checkbox. 186 09:37.160 --> 09:42.020 How awesome is that, my dear students. I hope you've got a big smile on your face and you can see how 187 09:42.020 --> 09:42.680 easy it is. 188 09:42.680 --> 09:43.970 This isn't tricky stuff. 189 09:44.000 --> 09:49.310 The final piece to the puzzle 🧩 is amending the styling of those labels. 190 09:50.200 --> 09:53.620 In fact, we want to remove a class 191 09:54.930 --> 09:56.940 when it's unchecked. 192 09:56.940 --> 09:59.700 And then we want to put the class back when it's toggled again. 193 09:59.910 --> 10:01.350 How can we do that? 194 10:01.560 --> 10:05.400 Well, we've got all the billingInputs, but now we don't need the billingInputs. 195 10:05.400 --> 10:08.160 We want to select all the labels. 196 10:09.090 --> 10:11.250 Because those are the ones we want to affect, right? 197 10:11.280 --> 10:16.140 So let's just call it billingLabels and we can do it in exactly the same way, 198 10:16.170 --> 10:17.580 querySelectorAll(), 199 10:17.670 --> 10:24.180 we want all the classes with billing-label attached to them, all elements with the class of billing- 200 10:24.180 --> 10:24.720 label. 201 10:24.960 --> 10:25.980 If I scroll up, 202 10:26.820 --> 10:27.900 that's what we're getting. 203 10:27.900 --> 10:32.430 We're getting all the labels that have a class of billing-label. 204 10:32.940 --> 10:33.900 Does that make sense? 205 10:35.640 --> 10:40.920 So we've got our labels right, and we're still going to be now doing code within this for...loop because 206 10:40.920 --> 10:43.680 we're going to be for...looping through all of those labels. 207 10:43.680 --> 10:48.510 And all we want to do now is toggle the class of 208 10:49.390 --> 10:51.070 disabled-label. 209 10:51.220 --> 10:53.290 We're just going to be toggling that on and off. 210 10:53.380 --> 10:56.860 In order to do that, we access our billingLabels collection. 211 10:57.010 --> 11:00.310 We access whatever item in that collection 212 11:00.310 --> 11:02.920 we are in the loop, at any given time, 213 11:03.010 --> 11:11.560 and then what's really cool, is we've got this classList property and in that we've got a method called 214 11:11.560 --> 11:14.130 toggle(), and it literally just toggles a class. 215 11:14.140 --> 11:15.820 What class are we wanting to toggle? 216 11:15.820 --> 11:19.960 Well, we are wanting to toggle the disabled-label class. 217 11:19.990 --> 11:20.920 Does that make sense? 218 11:20.950 --> 11:24.430 This classLists and this toggle() - that's given to us by the DOM, 219 11:24.430 --> 11:28.900 by the way. It's not JavaScript per se, but we use JavaScript to access it. 220 11:28.900 --> 11:33.340 All these brackets, all the dots, these are all JavaScript syntax. 221 11:33.340 --> 11:34.930 But anyway, this should work, right? 222 11:34.930 --> 11:40.480 If we go to our browser and now we start toggling this, you can see ever so slightly that the label 223 11:40.480 --> 11:42.040 styling has changed. 224 11:42.860 --> 11:45.890 You know, I can make it more obvious if we scroll up here, 225 11:46.770 --> 11:48.090 to our disabled label color, 226 11:48.090 --> 11:49.020 we can just say color 227 11:49.020 --> 11:50.010 let's just do red. 228 11:50.040 --> 11:51.030 So it's hideous. 229 11:51.030 --> 11:54.300 I know, but you'll notice a drastic change now. 230 11:55.260 --> 11:55.910 Right. 231 11:56.070 --> 11:57.690 How awesome, my dear students. 232 11:57.900 --> 12:01.350 And of course, what's really cool about this, because we have required on these inputs 233 12:01.380 --> 12:07.230 if the user types something here, something here, but doesn't fill anything in the billing address 234 12:07.230 --> 12:10.760 and tries to submit, we will get prevented from doing so. 235 12:10.770 --> 12:12.990 Front end validation is working. 236 12:13.110 --> 12:18.300 Of course, if the user disables this, then we are allowed to submit the form. 237 12:18.300 --> 12:18.780 Right. 238 12:18.810 --> 12:19.600 How cool. 239 12:19.620 --> 12:20.450 How cool. 240 12:20.460 --> 12:22.230 And I hope you followed along. 241 12:22.230 --> 12:24.510 Just to briefly give you a summary. 242 12:24.540 --> 12:25.830 We grabbed our checkbox. 243 12:27.040 --> 12:32.740 We then added an event listener on that checkbox, and the event we wanted to listen for was the change 244 12:32.740 --> 12:33.100 event. 245 12:33.100 --> 12:35.770 Every time a user changes the checked status, 246 12:35.800 --> 12:38.080 that change event will be fired by the DOM. 247 12:38.170 --> 12:42.790 When that happens, we want to execute a function called toggleBilling and then we just defined 248 12:42.820 --> 12:43.180 toggleBilling. 249 12:43.180 --> 12:46.090 All we did was we got a collection of all our inputs and labels. 250 12:46.300 --> 12:48.580 We then looped through that collection. 251 12:48.580 --> 12:51.070 We grabbed each item in that collection. 252 12:51.070 --> 12:57.670 And of course the two things we did was one, we removed and added that disabled attribute by using 253 12:57.670 --> 12:59.770 that exclamation mark in JavaScript. 254 12:59.770 --> 13:05.200 And the second thing we did was we toggled those classes on and off - that disabled-label class. 255 13:05.200 --> 13:09.520 And what's really cool to prove that it is toggling in real time, let's inspect this element. 256 13:09.850 --> 13:13.960 I'm actually glad I almost actually almost forgot to even show you this. 257 13:13.990 --> 13:19.600 What's really cool is if we grab this name right now, we've got the class of disabled-label. 258 13:19.630 --> 13:20.560 Can you see it? 259 13:22.290 --> 13:25.140 But if the user toggles this checkbox, 260 13:25.750 --> 13:26.890 what's going to happen? 261 13:27.100 --> 13:28.510 Well, it disappears. 262 13:28.540 --> 13:29.560 How awesome. 263 13:29.560 --> 13:35.890 And that is because we've accessed this toggle() method on the classList and we are toggling that class. 264 13:36.190 --> 13:39.690 So every time that event is fired, that class is being toggled. 265 13:39.700 --> 13:41.800 It's being included and excluded. 266 13:42.040 --> 13:45.010 If we check it again, it's added back. 267 13:46.180 --> 13:48.280 We uncheck it, it's removed. 268 13:48.310 --> 13:49.290 How awesome. 269 13:49.300 --> 13:49.880 So there we go. 270 13:49.900 --> 13:50.680 Hope you're having a lot of fun. 271 13:50.680 --> 13:51.940 Hope you're learning a ton. 272 13:51.970 --> 14:00.250 This was just a very, very rudimentary example of showing you how we can use the enabled and disabled 273 14:00.250 --> 14:01.810 pseudo classes. 274 14:01.840 --> 14:03.070 See you in the next lecture.