WEBVTT 0 00:00.960 --> 00:02.010 Ooh, it's getting cold. 1 00:02.010 --> 00:03.390 It's getting cold where I am. 2 00:03.390 --> 00:05.010 And I'm not a winter person. 3 00:05.010 --> 00:06.030 I love the summer. 4 00:06.630 --> 00:11.640 Anyway, this challenge, I'm going to warn you up front, it's going to challenge you. 5 00:11.760 --> 00:12.360 Uh oh. 6 00:12.450 --> 00:18.030 It's going to be a little bit difficult, but the skills you learn are going to be tremendously helpful 7 00:18.030 --> 00:19.980 when you start building your own custom forms. 8 00:19.980 --> 00:23.670 All I want to do is I want to create this toggle button - on and off. 9 00:23.670 --> 00:24.750 How do you do that? 10 00:24.750 --> 00:27.330 Firstly, I want to just share a few things with you. 11 00:27.330 --> 00:33.630 With this, you'll notice firstly that we've got an inner toggle switch, that little round circle and 12 00:33.630 --> 00:35.040 that moves. When it's on, 13 00:35.040 --> 00:36.420 I want that shifted to the right. 14 00:36.450 --> 00:39.720 When it's off, it shifts back to its original position. 15 00:39.720 --> 00:42.330 The background color of course changes to green. 16 00:42.510 --> 00:49.140 The other thing that happens is the "off" word changes to "on" and of course when it's off, the on disappears 17 00:49.140 --> 00:50.460 and we see the word off. 18 00:50.460 --> 00:52.020 So how can you build this? 19 00:52.050 --> 00:57.570 Well, I'll give you a few hints on how I did it, but my way is not the only right way. 20 00:57.570 --> 01:00.090 And that's why I encourage you to give it a go by yourself. 21 01:00.090 --> 01:03.880 But it can be a little bit tricky, so here are a few hints. 22 01:03.880 --> 01:11.710 Firstly, I set the input here with its type attribute set to checkbox, so we're actually dealing with 23 01:11.710 --> 01:12.390 a checkbox. 24 01:12.400 --> 01:19.570 Secondly, what we have to do then is we have to remove the default styling of that checkbox because 25 01:19.570 --> 01:21.940 the browser's checkbox is pretty ugly. 26 01:21.940 --> 01:22.310 Yuck 😝. 27 01:22.360 --> 01:28.270 Then what I did was I created a label and within the label I have two span tags, one with the word 28 01:28.300 --> 01:35.860 on, and one with the word off. And I apply unique classes to both of those which I target later with CSS 29 01:35.860 --> 01:37.930 and the CSS targeting is very simple. 30 01:37.930 --> 01:43.540 When the checkbox is checked, I want to target the class of "on" and I want to show that. 31 01:43.630 --> 01:50.650 And when it's unchecked I want to target the class with that span of "on" and I want to hide it. 32 01:50.650 --> 01:52.450 I want to set its opacity to zero. 33 01:52.450 --> 01:55.780 So that's how I'm toggling the "on" and "off" word itself. 34 01:55.780 --> 01:59.170 "Okay Clyde, but how do you create that custom toggle?" 35 01:59.170 --> 02:05.440 Well, very simply. Once you've hidden the browser's default toggle or checkbox styling, you can literally 36 02:05.440 --> 02:07.090 just create your own styling. 37 02:07.240 --> 02:13.060 I use a border to get that nice rectangular border. I set the border radius just to make it curved. 38 02:13.060 --> 02:15.790 And then how do I do that little black dot in the middle? 39 02:15.790 --> 02:19.660 Well, I target CSS pseudo elements. 40 02:20.020 --> 02:27.880 Specifically, I target the ::before pseudo element and within that again I define or create this little 41 02:27.880 --> 02:28.510 round circle. 42 02:28.510 --> 02:30.940 And yes, I'm using a bit of CSS here. 43 02:31.180 --> 02:33.220 We're using the transition property. 44 02:33.220 --> 02:39.460 So obviously when a user toggles it, that little round inner toggle switch slides to the right, it 45 02:39.460 --> 02:45.310 doesn't just instantly appear. I know ... I don't want to lose you, but this is a little bit difficult. 46 02:45.340 --> 02:46.360 Give it a go. 47 02:46.360 --> 02:50.770 Even if you can only get to the step where you remove the browser's default styling. 48 02:50.770 --> 02:51.610 That's good enough. 49 02:51.640 --> 02:53.320 You know, you don't have to know all the CSS. 50 02:53.350 --> 02:54.880 We're all going to be using the flex model. 51 02:54.910 --> 02:58.270 But yeah, the most important thing is just try make a start at it 52 02:58.270 --> 03:00.010 at least. Enjoy what you do. 53 03:00.040 --> 03:01.630 Put a big smile on your face. 54 03:01.630 --> 03:04.300 Have fun and I'll see you in the solutions video. 55 03:04.330 --> 03:05.050 Adios.