WEBVTT 0 00:00.950 --> 00:01.490 All right. 1 00:01.490 --> 00:02.420 You know the drill. 2 00:02.420 --> 00:06.810 We've got an empty index page and an empty styles.css file. 3 00:06.830 --> 00:09.410 We're going to create a simple HTML page. 4 00:09.500 --> 00:11.270 Yes, we're going to have a head section. 5 00:11.270 --> 00:15.770 And in here we're going to just link to our CSS file called styles.css. 6 00:15.800 --> 00:16.560 Very simple. 7 00:16.580 --> 00:17.510 We've got a body. 8 00:17.840 --> 00:18.830 Within our body, 9 00:18.830 --> 00:19.910 I want a form. 10 00:20.210 --> 00:21.800 We don't even need an action. 11 00:22.670 --> 00:28.730 What we can do here, is we can first set up the username input field. 12 00:28.760 --> 00:33.290 We can wrap it within a div, and we can have input of type text. 13 00:34.210 --> 00:39.760 A name we can give is first_name, ID we can give first_name. 14 00:39.940 --> 00:43.120 We want this to be a required field. 15 00:43.960 --> 00:47.890 Let's just put a placeholder for now as an empty string. 16 00:48.070 --> 00:48.640 How's that? 17 00:48.730 --> 00:49.420 Save it. 18 00:49.450 --> 00:51.430 Refresh the browser and there we go. 19 00:51.580 --> 00:53.920 A plain boring old input text field. 20 00:54.610 --> 00:56.540 I do want a label for this. 21 00:56.560 --> 01:01.300 The "for" has to match the ID of the input, which is first_name. 22 01:02.290 --> 01:04.690 And the label can just say Username. 23 01:05.230 --> 01:05.780 There we go. 24 01:05.800 --> 01:06.850 Pretty straightforward. 25 01:07.880 --> 01:13.510 Um, under this we can have a span, because later I want to add that check mark. 26 01:13.520 --> 01:19.160 Remember in the introduction we saw when it's valid, we have that little check mark on the right of 27 01:19.160 --> 01:20.060 each input. 28 01:20.270 --> 01:24.620 Well, I'm going to wrap that in this span. So it can be empty for now. 29 01:24.620 --> 01:28.370 But all I want to do is I want to give it a class of checkmark. 30 01:29.000 --> 01:30.200 So let's expand this. 31 01:30.570 --> 01:31.460 This is what it looks like. 32 01:31.460 --> 01:33.050 We've just done our username. 33 01:33.410 --> 01:34.730 Pretty straightforward, right? 34 01:35.720 --> 01:39.530 Let's just copy this, paste it, and now I want to do an email. 35 01:39.740 --> 01:43.430 So of course the type is not text, it's email. The name and ID, 36 01:44.800 --> 01:47.650 and label can all be email. Again, 37 01:47.740 --> 01:53.710 I want it to be required. And we can leave the placeholder as is, except username can be email 38 01:54.560 --> 01:55.190 address. 39 01:55.190 --> 01:57.740 And again, I want the span with a checkmark. 40 01:57.740 --> 01:59.240 But there's something else I want 41 01:59.390 --> 02:00.050 here my dear students. 42 02:00.050 --> 02:04.130 And that is, an error message. When the user doesn't incorrectly type their email, 43 02:04.230 --> 02:06.710 I want to show the user a message. 44 02:06.710 --> 02:08.330 Let's wrap that in a div 45 02:08.330 --> 02:12.320 why don't we, and we can give it a class of errorMessage. 46 02:12.950 --> 02:13.720 Very simple. 47 02:13.730 --> 02:15.650 We can type anything we want here. 48 02:15.680 --> 02:22.250 Let's just say your email needs to be valid. How's that? If we go to the browser, 49 02:22.520 --> 02:23.270 there we go. 50 02:23.300 --> 02:27.680 It looks like a big mess at the moment, but don't worry, that's where CSS comes in handy. 51 02:27.920 --> 02:30.980 Let's copy this email and you guessed it, 52 02:31.010 --> 02:35.240 let's do our final, final widget, which is a password widget. 53 02:35.630 --> 02:37.220 So let's do our password here. 54 02:37.220 --> 02:39.260 Input type of course is password. 55 02:39.260 --> 02:41.850 We can just change all of these to password. 56 02:42.090 --> 02:43.540 It can also be required. 57 02:43.550 --> 02:46.940 The other thing I want to add here though, my dear students, I want to be a bit more funky. 58 02:46.940 --> 02:48.320 I want to add a pattern attribute. 59 02:48.320 --> 02:51.050 And we've seen examples of this a lot. 60 02:51.170 --> 02:54.300 But this pattern I want to be very specific. 61 02:54.300 --> 02:57.270 I want the password to contain at least 6 characters. 62 02:57.270 --> 02:58.110 Well, you know what? 63 02:58.110 --> 03:00.090 Let me actually write it out here - the error message. 64 03:00.180 --> 03:01.500 Your password 65 03:02.310 --> 03:06.300 must contain at least six characters, 66 03:06.840 --> 03:08.490 one uppercase, 67 03:09.300 --> 03:18.030 one lowercase and one number. And I want to do this with regex, with a regular expression. 68 03:18.030 --> 03:24.360 And we know HTML accepts regular expressions in JavaScript format which we just include within these 69 03:24.360 --> 03:25.210 quotation marks. 70 03:25.240 --> 03:26.220 Very simple. 71 03:26.220 --> 03:28.200 And I'm going to be very, very quick here. 72 03:28.530 --> 03:37.170 The first thing I want to define is I want to say that we need at least one number. And we can do that 73 03:37.170 --> 03:43.140 by using this \d, which is equivalent, by the way, to using 0-9. 74 03:43.710 --> 03:46.470 I don't know, just showing you different ways to do things, I guess. 75 03:47.610 --> 03:50.730 Um, and then also want to now define lowercase. 76 03:50.730 --> 03:53.760 We can have any number of lower cases, 77 03:54.750 --> 03:56.130 um, which is a 78 03:56.970 --> 03:57.510 to z. 79 04:03.090 --> 04:08.640 And then now, obviously, I want us to target at least one uppercase 80 04:10.160 --> 04:12.350 right, A -Z. 81 04:13.540 --> 04:18.040 And then remember, the last thing is it has to contain at least six characters, this password. 82 04:18.040 --> 04:21.640 So we can just plug that in on the end with curly braces. 83 04:21.640 --> 04:26.590 And the first argument is the minimum and the second argument is the maximum 84 04:26.610 --> 04:26.890 right? 85 04:26.920 --> 04:29.260 We could define a very large number or just leave it blank. 86 04:29.290 --> 04:30.370 Let's just leave it blank. 87 04:30.370 --> 04:31.030 So there we go 88 04:31.060 --> 04:33.310 my dear students, this is the HTML. 89 04:33.310 --> 04:38.740 And if we go to our browser now and we expand it, it just looks like a big ugly mess. 90 04:38.740 --> 04:40.930 But this is what's really cool with CSS, right? 91 04:40.930 --> 04:44.150 Because we can transform this very, very quickly and very easily. 92 04:44.170 --> 04:49.750 So let's start. Let's go to our styles.CSS page. Now we can do it side by side so you can see the 93 04:49.750 --> 04:51.010 changes in real time. 94 04:51.010 --> 04:52.330 And let's start coding, right? 95 04:52.330 --> 04:53.890 Let's affect the body first. 96 04:54.010 --> 04:56.740 We can do the background #333. 97 04:56.770 --> 04:57.490 How's that? 98 04:58.090 --> 04:58.660 There we go. 99 04:58.960 --> 05:02.170 Let's change the font-family to, I don't know, sans-serif. 100 05:03.040 --> 05:04.240 Yeah, that's fine. 101 05:05.210 --> 05:08.060 And let's provide 20 pixels of padding. 102 05:08.150 --> 05:08.840 That's good. 103 05:08.870 --> 05:10.400 Let's now target our form. 104 05:10.400 --> 05:17.450 We know we've wrapped this entire thing in a form. And we can give it a max-width of 100 pixels and let's 105 05:17.450 --> 05:18.350 center it. 106 05:18.860 --> 05:20.450 Zero and auto. 107 05:20.930 --> 05:21.710 There we go. 108 05:22.340 --> 05:27.740 The next thing I want to do is I want to target our form, and then I want to target the div element, 109 05:27.740 --> 05:33.650 which is a descendant of the form. And let's change its position to relative. 110 05:34.990 --> 05:37.810 We can change its background to white. 111 05:37.850 --> 05:40.660 I know it looks pretty hideous, but don't worry, we're going to get there. 112 05:40.840 --> 05:49.540 We can change, or put a border at the bottom, to demarcate each input, of one pixel solid, and it can just 113 05:49.540 --> 05:50.470 be off white. 114 05:51.070 --> 05:51.670 There we go. 115 05:51.670 --> 05:54.800 So we've got the username, the email, and the password. 116 05:54.820 --> 05:58.030 Oh, you know what I haven't done, my dear students, I haven't put a submit button. 117 05:58.780 --> 06:00.520 So let's do that right at the bottom. 118 06:01.120 --> 06:05.890 Let's just have input of type submit, and value can be "Sign Up". 119 06:06.760 --> 06:08.010 I just remember now, looking at it. 120 06:08.020 --> 06:08.530 Okay, cool. 121 06:08.530 --> 06:10.060 So that's the div. 122 06:10.210 --> 06:13.840 The next thing I want to style is let's target the form. 123 06:13.840 --> 06:16.210 Within that we've got the div as a descendant. 124 06:16.210 --> 06:19.870 Within that we've got the labels to each form widget. 125 06:20.110 --> 06:23.050 Let's set the opacity to ... I don't know ... 0.3. 126 06:23.080 --> 06:23.710 There we go. 127 06:23.740 --> 06:24.640 Looking a bit better. 128 06:24.670 --> 06:25.540 Font weight. 129 06:25.570 --> 06:26.440 let's bold it up. 130 06:27.190 --> 06:31.510 Position, we can set it to absolute. Because it's absolute 131 06:31.540 --> 06:40.390 we can actually target its top property, push it down a bit, left 25 pixels. I know, it's looking 132 06:40.390 --> 06:42.670 pretty hideous now, but it's going to look better. 133 06:42.670 --> 06:43.510 It's going to look better. 134 06:43.510 --> 06:48.430 Let's target now the form div input. 135 06:49.330 --> 06:49.550 right. 136 06:49.570 --> 06:50.740 We're targeting the input. 137 06:50.770 --> 06:55.960 We want its width to be 100% of the entire container. 138 06:55.960 --> 06:58.750 And then we don't want default borders. 139 06:58.750 --> 07:03.820 We want to remove those default borders, and then we want to put now padding. I want the left padding 140 07:03.850 --> 07:06.910 to be 50 pixels and all other padding to be 20 pixels. 141 07:07.450 --> 07:07.780 Right? 142 07:07.780 --> 07:12.370 So the top right bottom and then left must be 50. 143 07:13.060 --> 07:13.880 And there we go. 144 07:13.910 --> 07:14.800 It's starting to come on. 145 07:15.490 --> 07:16.750 Let's just zoom out a little bit. 146 07:18.090 --> 07:21.200 And you can see we are showing all the error messages. 147 07:21.210 --> 07:22.490 We better hide that shortly. 148 07:22.500 --> 07:23.370 We'll do that soon. 149 07:23.370 --> 07:26.250 You see, when we focus, we've got, you know, we've got that horrible border. 150 07:26.340 --> 07:27.390 I want to just remove that. 151 07:27.390 --> 07:31.860 I want to be very explicit as to what styling we apply to this form. 152 07:31.860 --> 07:34.860 So, let's target the input 153 07:34.860 --> 07:36.750 but this time when it's in focus. 154 07:36.750 --> 07:43.110 So we targeting the CSS pseudo class of :focus, and I don't want there to be an outline. 155 07:43.110 --> 07:45.480 So when we focus it now there is no outline. 156 07:46.200 --> 07:47.250 Pretty neat, right? 157 07:48.620 --> 07:53.540 And we can also change the background when it's in focus to 231 158 07:53.540 --> 07:54.470 231 159 07:54.470 --> 07:55.760 231. 160 07:56.900 --> 07:57.790 How does this look? 161 07:58.690 --> 07:59.230 There we go. 162 08:00.440 --> 08:01.900 It's taking shape hey! 163 08:01.980 --> 08:02.810 I love this stuff. 164 08:02.840 --> 08:06.860 The next thing I want to do, is you can see the labels there - 165 08:07.070 --> 08:09.230 Username, Email Address & Password. 166 08:09.500 --> 08:16.010 When the user focuses on that widget, I want that label to have zero opacity. 167 08:16.190 --> 08:17.300 How can we do that? 168 08:18.240 --> 08:19.020 Simple. 169 08:20.700 --> 08:21.380 You know what I want to do? 170 08:21.390 --> 08:23.850 I want to grab our form div input. 171 08:23.850 --> 08:25.140 Just being explicit here. 172 08:25.140 --> 08:28.080 But this time, well, there are few ways we can do this. 173 08:28.080 --> 08:33.210 One, we can target all our inputs because we want the same logic to apply to every single input. 174 08:33.210 --> 08:38.190 But we could also be more explicit by going like this ... and going with type text, right, 175 08:38.190 --> 08:40.740 and when it's in focus, plus, 176 08:41.580 --> 08:45.720 and that "plus" just selects the first element in ... 177 08:45.870 --> 08:47.400 well let me write a label here ... 178 08:47.430 --> 08:48.870 well, let me put a comment. 179 08:48.900 --> 08:49.590 Right. 180 08:49.830 --> 09:00.090 Select the first label element and we do that by using the plus sign after the input with type with 181 09:00.570 --> 09:01.290 focus. 182 09:02.150 --> 09:03.050 That's all I'm doing here. 183 09:03.050 --> 09:03.430 Right? 184 09:03.440 --> 09:08.910 And of course, I want to set the opacity of that label to zero. 185 09:08.930 --> 09:13.460 So when the user focuses on username, it's gone. 186 09:13.490 --> 09:14.210 How cool. 187 09:14.360 --> 09:18.800 But the problem with this is then we would have to do exactly the same for each other input, right? 188 09:18.800 --> 09:21.860 By using a comma, and it just takes space. 189 09:21.980 --> 09:23.630 So I could do this. 190 09:24.510 --> 09:26.280 But instead of text, we've got email. 191 09:26.400 --> 09:29.460 If I hover email, it disappears and username and password is still there. But 192 09:29.760 --> 09:31.410 it's irritating, isn't it? 193 09:31.500 --> 09:40.440 So instead of doing this, we can just target all our inputs when they are in focus and then it should 194 09:40.440 --> 09:40.950 work. 195 09:40.980 --> 09:42.390 Email, Password ... 196 09:42.630 --> 09:42.900 How cool 197 09:42.930 --> 09:44.730 my dear students, how cool. 198 09:45.090 --> 09:52.650 But there is a problem here because look, let's say the user's name types "Wally", and he or she then 199 09:52.650 --> 09:53.340 loses 200 09:53.340 --> 09:54.420 focus on that widget. 201 09:54.450 --> 09:55.380 Look what happens. 202 09:55.410 --> 09:55.940 Oh, man 203 09:55.950 --> 09:57.210 the label is back! 204 09:57.360 --> 09:59.010 No, no problem. 205 09:59.010 --> 10:02.700 All we have to do again is do pretty much the same thing. 206 10:02.730 --> 10:03.570 Targeting, 207 10:03.570 --> 10:06.810 you know, we're working down the chain, the form, then the div, then the input 208 10:06.810 --> 10:13.260 but this time I want to target that input when it's :valid. And we're going to target that label and exactly 209 10:13.260 --> 10:13.800 the same thing 210 10:13.800 --> 10:15.450 we want to set its opacity to zero. 211 10:15.450 --> 10:16.740 So there we go, the user types 212 10:16.770 --> 10:21.000 "Wally", and toggles out that label doesn't come back because it's valid. 213 10:22.450 --> 10:23.440 Pretty intuitive. 214 10:23.800 --> 10:24.280 Okay. 215 10:24.320 --> 10:25.780 We are working through this. 216 10:25.960 --> 10:29.180 The next thing I want to do, is I want to now target when it's valid. 217 10:29.200 --> 10:33.520 So let's work our way down the chain to the input. 218 10:33.820 --> 10:37.420 And this time we want to target the :valid pseudo class. 219 10:37.420 --> 10:40.270 And when it's valid, we want to change the background color. 220 10:41.000 --> 10:45.860 And it can be 194, 255, 214. 221 10:45.890 --> 10:46.700 How does that look? 222 10:47.940 --> 10:49.530 Oh, that is just beautiful. 223 10:49.560 --> 10:50.610 Isn't that cool? 224 10:50.970 --> 10:54.380 All right, so that's the form where its input is valid. 225 10:54.390 --> 10:59.090 Same with email address ... man that's cool! And password ... 226 10:59.100 --> 10:59.430 oh! 227 10:59.430 --> 11:00.660 Why is password valid? 228 11:00.660 --> 11:02.340 That should not have been valid. 229 11:03.390 --> 11:05.670 Look, if I type one character, it's valid. 230 11:05.670 --> 11:08.880 So there's something wrong in my 231 11:11.430 --> 11:11.980 pattern. 232 11:12.230 --> 11:14.070 Oh, why is there another [curly bracket]. 233 11:14.700 --> 11:15.990 Shouldn't be there. 234 11:16.040 --> 11:18.510 Okay, let's go back to our browser here and let's try again. 235 11:18.750 --> 11:19.430 Okay, good. 236 11:19.440 --> 11:20.320 I'm typing characters. 237 11:20.340 --> 11:21.080 Nothing's happening. 238 11:21.090 --> 11:22.330 Let me do one uppercase. 239 11:22.350 --> 11:23.010 Nothing happens. 240 11:23.010 --> 11:24.900 But if I type a number now, it should go green. 241 11:24.900 --> 11:25.860 Would you agree with me? 242 11:25.890 --> 11:27.120 Let me push the number one. 243 11:27.280 --> 11:28.500 Yes. 244 11:29.460 --> 11:30.720 It's always nice when it works. 245 11:30.720 --> 11:31.260 So there we go. 246 11:31.260 --> 11:36.840 We know that our input where type is set to password is working correctly. 247 11:36.840 --> 11:38.640 Our regex is working. 248 11:39.570 --> 11:39.840 Awesome. 249 11:40.770 --> 11:42.660 Okay, let's go back to our CSS file. 250 11:43.110 --> 11:43.560 Okay. 251 11:43.560 --> 11:46.410 Now I want to work on that checkmark. 252 11:46.410 --> 11:47.940 I want to put a checkmark there. 253 11:47.940 --> 11:48.990 How can we do that? 254 11:49.200 --> 11:54.060 Well, remember in our HTML we've got this span with class checkmark. 255 11:54.180 --> 11:55.680 Let's put it inside there. 256 11:55.800 --> 12:02.220 So all we need to do is grab the span where its class is set to checkmark, and want to target the ::after 257 12:02.220 --> 12:03.540 pseudo element. 258 12:03.810 --> 12:06.510 We can set its content to nothing. 259 12:08.810 --> 12:13.100 Display inline, position can be absolute. 260 12:13.620 --> 12:15.060 Because you'll see what I want to do. 261 12:15.060 --> 12:16.710 I actually want to push it all the way to the right. 262 12:16.710 --> 12:18.780 That's why I want to use position of absolute. 263 12:18.810 --> 12:24.030 In other words, I want to access the right property and assign it to the value of zero. 264 12:24.060 --> 12:27.540 The width you can make 35 pixels. 265 12:29.620 --> 12:30.430 We actually need to see this. 266 12:30.430 --> 12:31.690 So let's quickly do that now. 267 12:31.720 --> 12:36.160 Let's first go to Google and try and find this checkmark. 268 12:38.440 --> 12:41.680 And here, toptal, this is quite a nice site. 269 12:41.710 --> 12:43.480 I showed you this one before, by the way. 270 12:43.480 --> 12:47.320 We can just copy this checkmark and we can put it into our HTML. 271 12:48.040 --> 12:50.580 That's why I just wanted to go to that site specifically. 272 12:50.590 --> 12:52.060 So how do we put this checkmark in? 273 12:52.060 --> 12:54.670 Well, we only want it to apply when it's valid, right? 274 12:54.670 --> 12:59.290 So let's work our way down the chain ... input of type valid, 275 12:59.290 --> 13:04.510 but then I want to now target its sibling of span. 276 13:04.630 --> 13:10.900 We know it's a sibling, and I want to target the span's ::after pseudo element and I want to change the 277 13:10.900 --> 13:11.380 content. 278 13:11.380 --> 13:14.530 Remember above, its default content is blank. 279 13:14.830 --> 13:17.770 I want the content to now be a check. 280 13:18.350 --> 13:23.630 So now if we type username and we type Wally, we've got a check, but you can see that it's shoved 281 13:23.630 --> 13:27.590 all the way to the top, so why don't we push it down. 282 13:29.090 --> 13:29.840 Much better. 283 13:30.140 --> 13:35.120 And why didn't ... it needs to be a bit, maybe bold. Font weight, 284 13:35.120 --> 13:35.750 bold. 285 13:36.200 --> 13:36.860 That's better. 286 13:36.860 --> 13:40.670 And of course, if I just, if we don't push us to the right, it's 287 13:41.060 --> 13:42.260 it's not going to look nice. 288 13:43.120 --> 13:48.100 You can see it's actually outside the widget entirely, which is why I set the position to absolute. 289 13:49.240 --> 13:50.380 I think that looks quite nice 290 13:50.380 --> 13:50.590 hey? 291 13:51.480 --> 13:52.950 You can see how easy this is as well, 292 13:52.980 --> 13:57.630 my dear students, you know, to create a really nice intuitive looking form. It doesn't take long. 293 13:58.200 --> 13:58.380 Okay. 294 13:58.410 --> 14:03.810 The other thing that I want to do is I want when it's invalid, I want us to show that big red box. 295 14:03.840 --> 14:05.760 I want the user to know it's invalid. 296 14:06.060 --> 14:09.180 So again, we can work our way down. And we don't have to do this 297 14:09.180 --> 14:12.720 by the way, I'm just showing you, you know, because as your sites become more complicated, you want 298 14:12.720 --> 14:13.830 to be very specific. 299 14:14.910 --> 14:16.770 So here we are, we are targeting the input 300 14:17.690 --> 14:22.760 with the class invalid. And I want to set its background 301 14:23.480 --> 14:24.530 to pink. 302 14:25.040 --> 14:28.760 What I don't like about this is you don't want to log on to a page and see everything red. 303 14:28.790 --> 14:33.620 It's only when you start filling out the form and I'll show you a neat, neat trick. 304 14:33.860 --> 14:40.220 Did you notice when I wrote the HTML that I put a placeholder and I put empty text because you and I 305 14:40.220 --> 14:44.690 know when a user toggles an input widget, that placeholder disappears. 306 14:44.720 --> 14:53.300 And what's really cool is that CSS has given us a :placeholder-shown pseudo class that we can target 307 14:53.510 --> 14:55.250 and they've given us the "not" keyword. 308 14:55.370 --> 14:59.450 So I want to say, only show me an error of pink, right, 309 14:59.540 --> 15:01.460 and I'm going to use the word not, 310 15:02.020 --> 15:04.990 when the placeholder is effectively not shown. 311 15:04.990 --> 15:06.670 That's what I'm trying to say here. 312 15:06.700 --> 15:07.930 That's what I'm trying to say. 313 15:09.280 --> 15:16.120 So I'm targeting the :invalid pseudo class, but only when the placeholder is not shown. 314 15:16.670 --> 15:22.310 So when the user clicks on username and types Wally, it's fine. Email address, when they start typing 315 15:22.310 --> 15:27.380 an invalid one, it doesn't work, but as soon as it becomes valid it goes green. 316 15:27.470 --> 15:28.270 How awesome. 317 15:28.280 --> 15:29.180 Same with password. 318 15:29.180 --> 15:30.620 We know it's invalid now. 319 15:30.830 --> 15:34.610 As soon as they do an uppercase and a number it goes green. 320 15:34.940 --> 15:35.750 How awesome. 321 15:35.840 --> 15:38.540 I think it's looking pretty good, my dear students, don't you? 322 15:39.380 --> 15:40.640 All right, well, let's continue. 323 15:41.390 --> 15:48.350 The next thing I want to do is I want to ... let's target this error message. Form, div, 324 15:48.380 --> 15:49.670 we know it's in a div, right? 325 15:49.670 --> 15:51.950 And we gave it a class of errorMessage. 326 15:53.040 --> 15:54.510 Uh, padding 327 15:54.510 --> 15:55.650 zero, 328 15:55.680 --> 15:57.090 30 pixels, 329 15:57.120 --> 15:58.950 zero, 50 pixels. 330 15:58.950 --> 15:59.790 You know what? 331 15:59.790 --> 16:01.530 I think this label should also be in line. 332 16:01.530 --> 16:02.370 Let me scroll up 333 16:02.370 --> 16:04.530 here, where is the label? 334 16:04.530 --> 16:05.100 Here we go. 335 16:05.100 --> 16:06.000 Let's do 50. 336 16:06.030 --> 16:06.960 That will look better. 337 16:07.890 --> 16:09.240 Then it's all in line, right? 338 16:11.410 --> 16:11.950 Okay, cool. 339 16:11.950 --> 16:14.260 So we've given padding to the error message. 340 16:14.260 --> 16:15.490 What else can we do to it? 341 16:15.700 --> 16:16.780 We can change its color. 342 16:18.920 --> 16:19.880 Just off black. 343 16:21.710 --> 16:23.690 Max height zero. 344 16:24.690 --> 16:25.630 Starting to look better. 345 16:27.010 --> 16:29.350 And overflow should be hidden. 346 16:30.850 --> 16:32.530 So now we can't see anything, right? 347 16:32.710 --> 16:33.430 But don't worry. 348 16:33.430 --> 16:34.330 It's going to work. 349 16:34.360 --> 16:35.170 Trust me. 350 16:36.130 --> 16:37.150 Transition. 351 16:37.300 --> 16:43.870 Let's make this animated because you'll see shortly that that actual widget will expand to show the 352 16:43.870 --> 16:45.250 text of the error message. 353 16:47.150 --> 16:49.240 .25 five seconds. 354 16:49.240 --> 16:49.870 How's that? 355 16:51.550 --> 16:55.450 And the error message can be a red color to make sure the user sees it. 356 16:55.690 --> 16:56.230 It can be italic. 357 16:58.690 --> 16:59.050 There we go. 358 16:59.050 --> 17:00.070 We can't see it yet. 359 17:00.100 --> 17:01.470 And why can't we see it? 360 17:01.480 --> 17:03.400 Well, it's because of this max-height property, right? 361 17:03.400 --> 17:07.840 If we remove that, we can see that our error message or messages are displayed. 362 17:07.840 --> 17:09.640 So we've set the max-height to zero. 363 17:09.640 --> 17:15.940 But what we want to do is we want to now not set it to zero when there is an error. 364 17:16.090 --> 17:21.640 So, access the form, work our way down the chain to the input, 365 17:21.670 --> 17:26.440 we are targeting inputs where it's pseudo class is set to :invalid, 366 17:26.440 --> 17:26.920 right? 367 17:26.920 --> 17:33.870 If we just do this, and we target the sibling, that's just a sibling, it just means a sibling in CSS, 368 17:34.150 --> 17:38.650 I want to find the sibling element where the class is errorMessage, which is that div. 369 17:39.490 --> 17:45.040 And now I want the max-height to be, I don't know, 250 pixels - that might work. 370 17:45.040 --> 17:47.470 And let's you know, it's not quite right, 371 17:47.470 --> 17:48.490 let's give it some padding. 372 17:48.520 --> 17:53.860 20 pixels, 20 pixels, 20 pixels and 50, because we're always giving 50 pixels to the left. 373 17:55.640 --> 17:56.770 Man, that looks a lot better. 374 17:56.780 --> 17:57.740 It looks good, man. 375 17:59.720 --> 18:00.410 Okay. 376 18:00.410 --> 18:02.870 But you'll notice now that it's displayed all the time. 377 18:02.870 --> 18:04.840 We don't want it to be displayed all the time. 378 18:04.850 --> 18:10.130 And again, all we have to do is we have to target CSS's "not" word. 379 18:10.130 --> 18:13.130 And we can access this placeholder-shown property again, 380 18:13.130 --> 18:13.670 right? 381 18:14.600 --> 18:18.390 Because when it's not shown, then we want it to apply. 382 18:18.410 --> 18:22.310 So when the user starts typing an invalid email address, we get an error. 383 18:22.310 --> 18:24.250 And of course it's all fine. 384 18:24.260 --> 18:24.890 Password. 385 18:24.890 --> 18:25.640 Same thing. 386 18:26.210 --> 18:28.700 Starts typing it, password is invalid. 387 18:28.700 --> 18:31.670 When it becomes valid again, it disappears. 388 18:32.030 --> 18:33.350 How awesome. 389 18:33.560 --> 18:34.940 Oh man, this is cool. 390 18:34.970 --> 18:35.350 All right. 391 18:35.360 --> 18:38.850 The final step is I just want to target that signup button. 392 18:38.870 --> 18:39.880 Very, very simple. 393 18:39.890 --> 18:43.130 We can target the input where it's type 394 18:44.110 --> 18:46.330 is set to submit. 395 18:47.270 --> 18:48.550 Okay, Very easy. 396 18:49.150 --> 18:53.440 We can display block, and give it a width of 100%. 397 18:53.470 --> 18:55.810 We can give it a margin. 398 18:57.650 --> 18:58.060 Yep, 399 18:58.460 --> 19:03.020 of 20 pixels above and below. Background, 400 19:03.380 --> 19:07.400 let's just give it D40040. 401 19:08.280 --> 19:10.040 How's that? 402 19:10.170 --> 19:11.970 White border 403 19:12.420 --> 19:13.320 zero. 404 19:14.580 --> 19:16.920 Padding 20 pixels all around. 405 19:16.920 --> 19:18.670 And let's increase the font size. 406 19:18.690 --> 19:20.060 Font size. 407 19:20.070 --> 19:21.840 We can just do 1.2rem. 408 19:22.620 --> 19:23.160 There we go. 409 19:24.000 --> 19:25.140 Come on. 410 19:25.170 --> 19:25.760 You gotta, 411 19:25.770 --> 19:27.600 gotta be PROUD of yourself. 412 19:27.600 --> 19:31.650 I mean, this is a really cool, simple form, and you've come a long way. 413 19:31.680 --> 19:33.360 I mean, we got the checkmark from the site. 414 19:33.360 --> 19:37.320 I guess I can close it down now, but it's a very intuitive form. 415 19:37.320 --> 19:41.040 You can see how easy it is to create cool forms. When the user starts typing 416 19:41.040 --> 19:46.920 "Wally", we get a checkmark. When the user starts typing an incorrect email address, we are told so. 417 19:46.920 --> 19:50.340 So, when it starts becoming correct, we get another check. 418 19:50.340 --> 19:52.170 And the same with the password. 419 19:53.310 --> 19:57.150 My dear students, this is what this course is all about. 420 19:57.150 --> 20:02.700 It's equipping you to be able to build forms very quickly, to understand how to target the :invalid, 421 20:02.730 --> 20:06.360 the :valid, the ::before and ::after pseudo elements, 422 20:06.360 --> 20:11.100 putting in checks like this, you're starting to understand how to build them now. And it's really, really 423 20:11.100 --> 20:11.700 awesome. 424 20:11.730 --> 20:13.080 Pat yourself on the back. 425 20:13.290 --> 20:17.230 You've learned a lot already in this course, but we're not done. 426 20:17.230 --> 20:19.720 We've still got a lot of other elements to learn about. 427 20:19.720 --> 20:24.550 In fact, up until this point, we've only really learned about the input element, haven't we? 428 20:25.000 --> 20:28.840 I know it can seem quite daunting, but, you know, have a lot of fun along the way. 429 20:28.840 --> 20:30.430 We need to enjoy what we do. 430 20:30.430 --> 20:36.310 And yeah, I've enjoyed these challenges and I'll see you in the next lecture.