WEBVTT 0 00:00.230 --> 00:03.950 My dear students, welcome back to this awesome, awesome section. 1 00:04.160 --> 00:08.450 And we're going to be doing some challenges in this section, some really fun challenges. 2 00:08.450 --> 00:10.640 But, you know, they shouldn't take us very long. 3 00:10.640 --> 00:12.620 Nevertheless, I hope you've got some coffee. 4 00:12.980 --> 00:13.790 Keep amped. 5 00:13.790 --> 00:15.020 And let's begin. 6 00:15.020 --> 00:19.160 Let's begin with this very first example of creating an email field. 7 00:19.160 --> 00:25.730 And all we want to do is we want to visually show the user when it's invalid and when it's valid. 8 00:25.730 --> 00:32.300 And to do that, as you know, all we have to do is target the CSS pseudo classes :valid and :invalid. 9 00:32.300 --> 00:34.970 And of course we want to make this a required field. 10 00:35.090 --> 00:37.490 It's very simple, but let's get into it. 11 00:37.490 --> 00:41.150 I've got Visual Studio Code here, I've got the browser, I've got some coffee. 12 00:41.150 --> 00:41.750 Let's go. 13 00:44.450 --> 00:45.410 Oh man, that's good. 14 00:45.500 --> 00:46.460 That is so good. 15 00:47.120 --> 00:48.470 And yeah, let's begin. 16 00:48.470 --> 00:51.080 Let's create a very, very simple HTML document. 17 00:51.080 --> 00:56.450 Within here we are going to have a head section. And within the head section, we're going to have a style 18 00:56.450 --> 00:59.180 tag because that's where we're going to put all our CSS. 19 00:59.180 --> 01:00.750 But for now, let's ignore that. 20 01:00.750 --> 01:02.730 Let's create a body. In the body, 21 01:02.730 --> 01:03.810 let's create a form. 22 01:05.950 --> 01:06.820 In this form, 23 01:06.820 --> 01:07.810 I want to be very simple. 24 01:08.080 --> 01:14.350 All we want is a label and we can say for email and of course the content within the tags, we can say 25 01:14.380 --> 01:16.660 email required. 26 01:17.140 --> 01:19.010 We save that and there we go. 27 01:19.030 --> 01:20.080 Very, very simple. 28 01:20.740 --> 01:21.760 Nothing you haven't seen before. 29 01:21.760 --> 01:25.480 And of course we want to create our actual input with type of email. 30 01:25.840 --> 01:27.310 Its name attribute 31 01:27.310 --> 01:31.990 we can leave blank, and ID has to match the labels of the "for" attribute, 32 01:31.990 --> 01:33.760 remember which we said was email. 33 01:33.850 --> 01:34.750 So there we go. 34 01:35.850 --> 01:37.100 Pretty straightforward. 35 01:37.110 --> 01:40.380 Firstly, I want this to be defined as a required field. 36 01:40.380 --> 01:41.520 How do we do that? 37 01:42.390 --> 01:43.260 That's right. 38 01:43.290 --> 01:45.300 With the required attribute. 39 01:45.330 --> 01:47.160 It is really, really that simple. 40 01:47.460 --> 01:52.200 The next thing I want to do is now affect the styling, because right now it is hideous and in fact 41 01:52.200 --> 01:54.380 the user doesn't know whether it's valid or invalid. 42 01:54.390 --> 01:56.160 So let's start styling it up. 43 01:56.490 --> 01:58.560 Firstly, let's just add some padding everywhere. 44 02:00.600 --> 02:03.190 Padding .5em. 45 02:03.570 --> 02:04.770 Yeah, it's better. 46 02:04.770 --> 02:07.830 And let's add some padding as well in the actual input itself. 47 02:09.770 --> 02:10.640 Padding ... 48 02:11.000 --> 02:12.140 we don't want to go overboard. 49 02:12.590 --> 02:18.440 Let's just add a bit of padding. It's all these little nuances, these little tweaks that really do make 50 02:18.470 --> 02:19.610 a form pop. 51 02:20.370 --> 02:24.500 The first thing I want to do is I want to style the :invalid pseudo class. 52 02:24.510 --> 02:30.960 All we need to do is target our input. And we could even be more explicit with CSS selectors like saying 53 02:30.960 --> 02:33.330 it's type has to be email. 54 02:34.310 --> 02:38.030 And then we want to target, of course, the :invalid pseudo class. 55 02:38.030 --> 02:40.490 And all we want to change here is the background color. 56 02:41.720 --> 02:41.900 Let's 57 02:41.900 --> 02:42.740 just go lightcoral. 58 02:42.770 --> 02:43.640 How does that look? 59 02:43.760 --> 02:44.420 There we go. 60 02:44.450 --> 02:45.350 Very, very simple. 61 02:45.350 --> 02:45.950 Right? 62 02:46.130 --> 02:52.250 But just FYI, because this is the only input we have on our form, we don't even need to be this explicit 63 02:52.250 --> 02:56.930 by setting its type email. We can just target all the inputs on our form with type :invalid and nothing 64 02:56.930 --> 02:57.650 changes. 65 02:57.830 --> 02:58.920 How awesome. 66 02:59.030 --> 03:00.090 (sound effect: Mission completed) 67 03:00.230 --> 03:01.010 Very, very cool. 68 03:01.040 --> 03:08.060 Because now if the user types abc@abc.com, we can see that the :invalid pseudo class does not 69 03:08.060 --> 03:11.600 apply - it's switched off - and that's why the red background disappears. 70 03:12.170 --> 03:13.220 So that's very simple. 71 03:13.910 --> 03:18.410 Oh, the other thing I wanted to show you, if we don't have this required attributes, what do you 72 03:18.410 --> 03:20.660 think will happen to the :invalid pseudo class? 73 03:21.520 --> 03:23.410 So let's get rid of it, save it. 74 03:23.410 --> 03:26.440 And it's gone because now it's not required. 75 03:26.440 --> 03:27.730 So it's not invalid. 76 03:28.600 --> 03:29.200 Interesting. 77 03:29.740 --> 03:33.910 Finally, just to finish this off, we're going to target now the :valid pseudo class. 78 03:33.910 --> 03:38.050 And of course, we just want its background color to be like a light green. 79 03:38.080 --> 03:41.590 The user now types abc@abc.com. 80 03:42.430 --> 03:43.030 Boom 💥. 81 03:45.170 --> 03:48.740 There you go, my dear students. That's how easy this first example was. 82 03:48.740 --> 03:53.150 I'm just getting you used to targeting these pseudo classes, because when you work with forms, targeting 83 03:53.150 --> 03:58.040 these classes becomes crucial and it really does create a nice user experience. 84 03:58.310 --> 04:01.190 But anyway, I hope you are warm. 85 04:01.430 --> 04:02.390 Hope you're ready. 86 04:02.780 --> 04:04.340 I'll see you in the next challenge.