WEBVTT 0 00:00.080 --> 00:01.750 Are you following me? Are you following? 1 00:01.760 --> 00:03.040 Please don't get lost in the detail. 2 00:03.050 --> 00:06.920 Let me just expand this quickly and let me just give you a summary of what we've done. 3 00:06.920 --> 00:07.490 Okay. 4 00:07.670 --> 00:09.470 Well, firstly, let me scroll to the bottom here. 5 00:09.470 --> 00:11.600 Our HTML is very simple, right? 6 00:11.600 --> 00:14.210 We've just got an input, and a label. Within the label, 7 00:14.210 --> 00:17.870 we've got our on and off words and we're going to change the styling of those shortly. 8 00:17.900 --> 00:19.610 Right now we can see both on the screen. 9 00:19.610 --> 00:26.420 So we've got an input of type checkbox. And then at the top of our file we are slowly starting to style 10 00:26.420 --> 00:30.470 this checkbox because we don't like the default styling provided by the browser. 11 00:30.500 --> 00:34.280 The first thing we did was we defined kind of this flex layout. 12 00:34.310 --> 00:36.770 It just helps me center things, add spacing etc. 13 00:36.770 --> 00:38.240 It just makes it look nice effectively. 14 00:38.240 --> 00:45.920 But you didn't have to even do this. The next, or the more important things that we did, is we removed 15 00:45.920 --> 00:51.290 the default styling of the browser's checkbox. And then we've started to create our own styling. 16 00:51.290 --> 00:52.760 So what is the next step? 17 00:53.440 --> 00:54.010 You've got it. 18 00:54.130 --> 00:57.430 The next step is to create that little round circle within the toggle, right? 19 00:57.430 --> 00:59.980 Because we want that circle to start at the left. 20 00:59.980 --> 01:03.790 And then when we toggle it on, we want it to transition nicely to the right. 21 01:03.790 --> 01:06.190 And of course we want the background color to change. 22 01:06.190 --> 01:07.270 So that's what we want to do. 23 01:07.300 --> 01:08.130 How can we do that? 24 01:08.140 --> 01:14.470 Well, why don't we target the ::before pseudo element and use that to put in, you know, this little 25 01:14.470 --> 01:15.900 round toggle button? 26 01:15.910 --> 01:17.020 Let me show you what I mean. 27 01:17.750 --> 01:20.770 So firstly, again, let's have a comment here, 28 01:20.780 --> 01:28.430 "style the ::before content to look like the inner toggle switch", 29 01:29.540 --> 01:29.810 right. 30 01:29.810 --> 01:31.790 And that's the bit that moves. 31 01:31.790 --> 01:33.740 That's what I mean by the inner toggle switch. 32 01:35.230 --> 01:39.190 All right, let's do side by side so you can see what's going on as we go. 33 01:39.400 --> 01:44.920 Firstly, we want to target the input where it's type attribute is set to checkbox. 34 01:45.040 --> 01:52.540 We're being very explicit here and then we want to target this ::before pseudo element. It's content property 35 01:52.540 --> 01:54.160 we can set to nothing. 36 01:54.530 --> 01:55.660 Um, what should we do? 37 01:55.660 --> 01:56.680 Background color, 38 01:58.450 --> 01:59.560 is black. 39 02:00.790 --> 02:07.870 Let's set a width of 16 pixels, a height of 16 pixels. 40 02:07.900 --> 02:10.390 A border-radius, because we want it round, remember? 41 02:10.570 --> 02:14.260 Border-radius of, say, 16 pixels. 42 02:14.440 --> 02:16.660 Position can be absolute. 43 02:17.800 --> 02:18.370 I often do 44 02:18.400 --> 02:19.120 absolute. 45 02:19.720 --> 02:21.890 I should have maybe done this earlier than you could have seen what I was doing. 46 02:21.910 --> 02:27.850 I often like absolute because then we have a lot of control over where our design is taking place. 47 02:28.330 --> 02:35.350 You can see now it's positioned absolute, so it's at the top-left of the container element or of the input 48 02:35.350 --> 02:36.670 type checkbox element. 49 02:36.670 --> 02:40.330 And then of course, what's nice with absolute is we can be very explicit, you know, we can move it 50 02:40.330 --> 02:43.270 down and we can move it to the right. 51 02:43.480 --> 02:44.560 Let's see if that makes sense. 52 02:44.560 --> 02:45.040 There you go. 53 02:45.070 --> 02:45.770 How does that look? 54 02:45.790 --> 02:46.840 I think that looks awesome. 55 02:46.840 --> 02:48.430 And then remember what we said, 56 02:48.460 --> 02:50.110 I want things to transition. 57 02:50.170 --> 02:50.710 Okay? 58 02:50.890 --> 02:54.700 I want all CSS properties to transition 0.4 seconds. 59 02:54.700 --> 03:00.880 And of course, now even when we toggle this and check it, nothing happens because we haven't defined 60 03:00.880 --> 03:02.140 any CSS. 61 03:02.410 --> 03:03.820 So let's do that quickly. 62 03:03.970 --> 03:06.460 But you can see how quickly this this happens, right? 63 03:06.460 --> 03:07.540 It's so, so fun. 64 03:07.580 --> 03:08.860 Hope you're enjoying it. 65 03:09.490 --> 03:18.710 So now what we want to do is we want to change the outer background color and move the inner toggle 66 03:18.710 --> 03:19.700 switch 67 03:20.890 --> 03:23.710 when the checkbox is checked. 68 03:24.970 --> 03:31.000 And we want to use transitions for smooth animation. 69 03:31.420 --> 03:32.530 So that's a hint. 70 03:32.980 --> 03:35.350 So can you figure out how to do it? 71 03:36.290 --> 03:38.900 Firstly, what pseudo class should we target? 72 03:39.230 --> 03:40.580 What should we target? 73 03:40.610 --> 03:42.770 That's right, the :checked pseudo class. 74 03:42.770 --> 03:50.690 So let's target the input with its type attribute is set to checkbox, and we want to now affect the styling 75 03:50.690 --> 03:51.590 when it's checked. 76 03:51.590 --> 03:54.350 So we're targeting the :checked pseudo class. 77 03:54.350 --> 03:56.000 What's the first thing we want to do? 78 03:56.480 --> 03:57.380 You've got it. 79 03:57.410 --> 03:59.960 We want to affect the background-color, right? 80 04:00.140 --> 04:03.950 And we want this to be a nice, cool green color. 81 04:03.980 --> 04:04.870 There's lime. 82 04:04.880 --> 04:06.210 I don't know if lime would look nice. 83 04:06.230 --> 04:06.920 Let's see. 84 04:07.790 --> 04:08.900 It's a bit too green hey. 85 04:10.620 --> 04:11.850 Maybe we do it, 86 04:13.010 --> 04:13.790 a bit lighter. 87 04:13.820 --> 04:14.420 How's that? 88 04:14.450 --> 04:15.510 We'll run with that. 89 04:15.530 --> 04:16.400 We'll run with that. 90 04:16.400 --> 04:17.180 That's okay. 91 04:17.330 --> 04:21.320 But you'll notice now that, of course, it's happening instantly. 92 04:21.330 --> 04:23.060 And remember, I gave you another hint. 93 04:23.060 --> 04:27.680 I said, let's use the transition property so we can smooth our animation. 94 04:27.890 --> 04:30.170 So let's do that transition. 95 04:30.800 --> 04:34.870 And I want to transition all CSS properties to 0.4 seconds. 96 04:34.880 --> 04:38.960 Now when we toggle on and off, can you see how like it's so cool, right? 97 04:38.960 --> 04:40.340 It kind of fades in. 98 04:40.340 --> 04:41.210 Yeah. 99 04:41.210 --> 04:42.320 And I love this stuff. 100 04:42.640 --> 04:44.030 Ooh, more coffee. 101 04:46.730 --> 04:48.650 Get the brain juices cranking ⚙. 102 04:49.220 --> 04:50.540 We're not quite done, are we? 103 04:50.540 --> 04:56.120 Because when we toggle this, the color changes, but the inner toggle switch doesn't move. 104 04:56.150 --> 04:58.310 So how can we make that move? 105 04:58.340 --> 04:59.600 Let me give you a clue. 106 04:59.870 --> 05:02.990 Well, firstly, how did we define the inner toggle switch? 107 05:03.470 --> 05:04.010 That's right, 108 05:04.010 --> 05:07.970 we used the ::before pseudo element. And remember how we've positioned it 109 05:07.970 --> 05:08.960 absolutely. 110 05:09.290 --> 05:14.390 And we shifted it slightly right by this left property. 111 05:14.390 --> 05:20.420 And what's really cool is if we change the left property to say 34%, we can see the toggle is in the 112 05:20.420 --> 05:22.820 right position all the way, pushed to the right. 113 05:23.150 --> 05:30.440 So somehow we need to change this left property and define its value to be 34%. 114 05:30.470 --> 05:31.520 How do we do that? 115 05:32.510 --> 05:34.010 Very, very simple. 116 05:34.010 --> 05:34.580 Right? 117 05:34.670 --> 05:42.470 All we need to do is we need to target our input element where its type attribute is set to checkbox. 118 05:42.470 --> 05:51.590 And we only want this to apply, right, shift to the right, when it's .... ooooo, I almost almost dropped my coffee. 119 05:51.920 --> 05:52.150 Whew. 120 05:52.190 --> 05:53.300 That would have been horrible. 121 05:53.480 --> 06:00.350 We only want that inner toggle switch to shift to the right when we are in the checked state. 122 06:00.710 --> 06:08.330 So we want to target the checked state, and we only want to affect the ::before pseudo element. 123 06:08.330 --> 06:12.710 So here you can see we are kind of combining CSS pseudo classes and elements. 124 06:12.740 --> 06:15.860 It really is neat. And we want to change the left property. 125 06:15.870 --> 06:16.970 I know I said 34%. 126 06:16.970 --> 06:18.010 Why don't we just do 35%? 127 06:18.020 --> 06:19.040 It doesn't really matter. 128 06:19.070 --> 06:21.500 Now, if I toggle this, look what happens. 129 06:21.940 --> 06:22.360 Woo hoo! 130 06:22.900 --> 06:24.220 How awesome is that? 131 06:24.250 --> 06:25.180 How awesome. 132 06:25.570 --> 06:27.670 Come on, my dear students, you got to love this. 133 06:27.700 --> 06:31.570 There's only one more thing to do now, and that is display the "on" and "off", 134 06:31.570 --> 06:34.480 depending on whether we're in the checked state or unchecked state. 135 06:34.510 --> 06:35.710 How can we do that? 136 06:36.700 --> 06:37.450 It's very, very easy. 137 06:37.450 --> 06:38.200 Let me show you. 138 06:38.740 --> 06:40.350 All we have to do. 139 06:40.360 --> 06:41.440 Oh, well, you know what? 140 06:41.470 --> 06:42.900 Let me have another comment. 141 06:42.910 --> 06:44.860 Okay. Let's do another comment here. 142 06:45.860 --> 06:47.090 Let's cause 143 06:47.120 --> 06:59.720 the on and off parts of the label to be visible when the checkbox is checked and unchecked respectively. 144 07:01.380 --> 07:03.240 We're going to use ... 145 07:03.240 --> 07:04.200 here's your hint, 146 07:04.200 --> 07:05.090 here's your tip ... 147 07:05.100 --> 07:12.960 we're going to use the general sibling CSS selector, which looks like that, 148 07:13.660 --> 07:18.730 to select all siblings of a specified element. 149 07:20.810 --> 07:21.920 Okay, so that's your tip. 150 07:22.040 --> 07:24.380 Do you want to give it a go before I show you the solution? 151 07:25.370 --> 07:26.380 Well, it's very simple. 152 07:26.390 --> 07:31.580 The first thing we want to do right, when the user logs on, is we know it's in an off state. 153 07:31.580 --> 07:38.150 So we want to target the span of class "on" and we want to set its opacity to zero. 154 07:38.390 --> 07:39.650 So input, 155 07:40.010 --> 07:43.610 right, and we don't need to specify the type because it is the only input, 156 07:43.610 --> 07:47.200 but obviously you're going to be dealing with more complex forms in the real world. 157 07:47.210 --> 07:49.250 So that's why I'm specifying this type. 158 07:49.430 --> 07:52.340 But we could easily just have input. 159 07:52.400 --> 07:57.710 Okay, but let's do more specific targeting with type set to checkbox. 160 07:57.710 --> 08:03.920 So now we've targeted the input and I want to target a sibling, and the sibling I want to target is the 161 08:03.920 --> 08:04.580 label. 162 08:04.910 --> 08:13.250 And within the label we've got a descendant being that span element where its class is set to on. 163 08:13.520 --> 08:17.120 And that, my dear students, is what I want to target. 164 08:17.150 --> 08:22.520 Now there's something else we have to do, but let me first show you this, and I want to set its opacity 165 08:23.120 --> 08:23.990 to zero. 166 08:24.020 --> 08:26.160 If we save this, and look at the browser, 167 08:28.370 --> 08:29.610 how cool does that look? 168 08:29.750 --> 08:29.960 Okay. 169 08:29.960 --> 08:34.430 And it looks like we are set, but you'll see that there's something else we have to do as well. Because 170 08:34.430 --> 08:37.760 when the user toggles this, and clicks the button, nothing happens. 171 08:37.760 --> 08:38.270 Right. 172 08:38.270 --> 08:45.200 And in fact, when this is checked, do you agree with me that we don't want to see the "off". So when 173 08:45.200 --> 08:48.500 it's checked, we don't want to see the word "off"? 174 08:49.100 --> 08:52.610 So we also want to set its opacity to zero. 175 08:53.150 --> 08:55.290 So there are two scenarios we're targeting here. 176 08:55.310 --> 08:59.780 The first scenario is where it's not checked. 177 08:59.810 --> 09:03.590 We want to hide the on. And when it is checked, we want to hide the off. 178 09:03.770 --> 09:08.780 So let's do that quickly. So we can separate out different stylings by a comma. 179 09:09.140 --> 09:15.220 And now what we want to do again, we want to target the input where its type is set to checkbox. 180 09:15.230 --> 09:21.440 But remember, when it comes to that "off" word, we want to target the state when it's checked. And then 181 09:21.440 --> 09:22.820 we can apply the same logic. 182 09:22.820 --> 09:31.640 We want to find the sibling of label, but this time with the span of class "off" and we want to set the 183 09:31.640 --> 09:33.220 opacity to zero. 184 09:33.230 --> 09:37.160 So when we go to the browser, we toggle this, it disappears. 185 09:38.060 --> 09:40.220 How awesome is that, my dear students. 186 09:40.490 --> 09:41.570 Man, this is cool. 187 09:41.780 --> 09:46.650 And then finally, we want to apply the same logic to show the "on", right. 188 09:46.670 --> 09:47.330 How do we do that? 189 09:47.330 --> 09:51.520 Well, let's target the input where it's type is set to checkbox. 190 09:51.530 --> 09:56.360 You can see how intuitive this is, by the way, as you get more and more comfortable with coding, 191 09:56.360 --> 09:58.490 these things are very quick to implement. 192 09:58.520 --> 10:05.540 We want to target now the checked state and of course when it's checked we want to target the label, 193 10:05.570 --> 10:15.350 but this time we're targeting the span of class "on". And here we want opacity of ... drumroll 🥁 ... you guessed 194 10:15.350 --> 10:22.220 it, one. And when the user toggles on and off, it works as expected. 195 10:22.550 --> 10:24.110 Come on, my dear students. 196 10:24.470 --> 10:25.430 Wow. 197 10:25.460 --> 10:26.990 Isn't this so, so awesome? 198 10:26.990 --> 10:28.970 I mean, let's just expand this browser. 199 10:29.540 --> 10:30.350 How cool is this? 200 10:30.350 --> 10:33.290 You've literally created your own custom toggle button. 201 10:33.290 --> 10:35.300 And don't take this information for granted. 202 10:35.300 --> 10:39.700 What you're learning here, these little pieces of information mean you can literally apply it to your 203 10:39.700 --> 10:40.480 own forms. 204 10:40.480 --> 10:45.520 You don't have to use the ugly default styling that the browser gives you and in fact you shouldn't. 205 10:45.520 --> 10:49.840 And as you become more comfortable with coding, really it only takes you another ten minutes of your 206 10:49.840 --> 10:55.030 time to create really intuitive and easy to use buttons on your form. 207 10:55.300 --> 10:58.960 Hope you're having a lot of fun, but we're not yet done with this challenge section. 208 10:58.960 --> 11:04.720 There are still a few more challenges I want to "challenge" you to, so see you in the next one.