WEBVTT 0 00:00.080 --> 00:03.620 Welcome to the solution video, and I hope you learn something new. 1 00:03.650 --> 00:06.560 Like I mentioned, I want to use a few CSS things. 2 00:06.560 --> 00:13.640 I want to use the :valid pseudo-class, the :invalid pseudo-class, the "not" keyword and the 3 00:13.640 --> 00:15.400 :placeholder-shown pseudo-class. 4 00:15.410 --> 00:16.640 So let's give it a go. 5 00:16.730 --> 00:17.570 Very, very simple. 6 00:17.570 --> 00:19.190 Let's start with an HTML page. 7 00:19.190 --> 00:22.850 We're going to need a head section in here, and of course a style section. 8 00:23.480 --> 00:25.820 And then let's create a body. 9 00:26.420 --> 00:28.550 In the body we want a form. 10 00:29.090 --> 00:30.380 We don't need an action [attribute] here. 11 00:30.710 --> 00:34.280 And first thing is, first let's create a label. 12 00:34.960 --> 00:38.290 We can have a "for"attribute, assigned to the value of story. 13 00:38.320 --> 00:41.530 We want the user to spin us a story. 14 00:42.070 --> 00:45.160 If we save this, refresh the browser, we can see our label. 15 00:45.230 --> 00:46.210 Very intuitive. 16 00:46.240 --> 00:52.040 The next thing I want to do is I want to have a textarea. The name we can give story. 17 00:52.090 --> 00:56.150 We have to have a name attribute if we want it submitted to the server, right? 18 00:56.170 --> 01:00.700 I guess here it doesn't really matter because we're not submitting this to a server. I'm just showing 19 01:00.700 --> 01:03.490 an example of styling, so we can remove it. 20 01:03.610 --> 01:10.030 The ID just to match it up with the label, we have to use the same value we assigned in the for attribute, 21 01:10.060 --> 01:11.710 which was "story". 22 01:11.740 --> 01:16.180 If we save this, refresh the browser, we can kind of see everything pulling together. 23 01:16.180 --> 01:19.450 But there are more things I want you to do to this textarea, right? 24 01:19.450 --> 01:23.740 Because if we are wanting a story, the user could just type "a" and submit that. 25 01:23.770 --> 01:24.640 We don't want that. 26 01:24.640 --> 01:28.300 We want a minimum length and we also want a placeholder. 27 01:28.330 --> 01:29.200 Very, very simple. 28 01:29.200 --> 01:31.270 We just add the attribute minlength. 29 01:31.270 --> 01:38.210 Remember we discussed it. And let's just say 15 characters long is fine and let's give this a placeholder. 30 01:38.830 --> 01:42.850 And the placeholder text can just be "something juicy". 31 01:42.970 --> 01:43.780 How's that? 32 01:43.810 --> 01:44.500 You know what, 33 01:44.500 --> 01:45.340 it's actually a bit high. 34 01:45.340 --> 01:46.780 We don't need 10 rows. 35 01:46.780 --> 01:48.010 Let's just do 5. 36 01:48.040 --> 01:48.730 That's better. 37 01:48.760 --> 01:50.170 We can make it a bit wider. 38 01:50.560 --> 01:51.360 There we go. 39 01:51.370 --> 01:55.300 Starting to look nice, but now let's start styling. 40 01:55.330 --> 02:02.350 The first thing I want to do, is I don't like the hard black text font color, so let's just grab our 41 02:02.350 --> 02:04.150 body, and change the color 42 02:04.630 --> 02:08.680 I'll just, you know, I want to show you different ways to do things, which is why I'm doing this. 43 02:08.680 --> 02:09.880 I don't have to do this. 44 02:11.230 --> 02:11.800 There you go. 45 02:11.810 --> 02:14.210 It's just slightly off black, which is quite nice. 46 02:14.250 --> 02:20.050 So all I want to do in the body. You'll notice that the label is displayed inline by default. 47 02:20.050 --> 02:26.650 That's why "Spin a story" is showing in the same row as something juicy - as the text element, or the 48 02:26.650 --> 02:27.220 textarea element. 49 02:27.220 --> 02:28.330 We don't want that, right? 50 02:28.330 --> 02:32.350 So we want to grab our label, we want to change the display property to block. 51 02:32.350 --> 02:36.520 We want it to take an entire row all by itself. And we need some margin on the bottom. 52 02:36.520 --> 02:39.730 I don't like it so close to the textarea. 53 02:39.760 --> 02:41.560 Okay, that's already starting to look better. 54 02:41.560 --> 02:43.900 Let's now just style the textarea itself. 55 02:43.900 --> 02:45.130 Textarea. 56 02:46.370 --> 02:50.420 Let's apply a border - 1px solid. 57 02:51.370 --> 02:52.330 Just off black. 58 02:52.360 --> 02:54.880 It's quite nice to apply box-shadows, by the way. 59 02:55.240 --> 02:57.730 Just adds a bit of pizzazz 🤩. 60 02:58.000 --> 03:01.480 And again, we can just do off black. How does that look? 61 03:01.510 --> 03:02.520 Yeah, it's looking good. 62 03:02.530 --> 03:07.000 And remember how I said by default, there's this resize property, right? 63 03:07.000 --> 03:09.410 The user can adjust the size of the text box. 64 03:09.430 --> 03:11.320 We can affect that with CSS. 65 03:11.320 --> 03:12.490 And it's so easy. 66 03:12.490 --> 03:17.800 All we need to do is access the resize property, and there are many values. 67 03:17.800 --> 03:20.080 Here are some that my IDE is already telling us about, 68 03:20.080 --> 03:20.390 right. 69 03:20.410 --> 03:22.150 I want none. 70 03:22.240 --> 03:23.400 Just to show you an example. 71 03:23.410 --> 03:23.650 Right. 72 03:23.650 --> 03:26.460 So now the user cannot adjust the size in any way. 73 03:26.470 --> 03:31.480 All right, my dear students, I want us to use those 4 CSS words. 74 03:31.480 --> 03:33.040 Which one should we tackle first? 75 03:33.040 --> 03:34.060 Let's tackle the easiest. 76 03:34.060 --> 03:41.500 Let's do invalid. Textarea and we tackle the :invalid pseudo-class. 77 03:42.910 --> 03:44.500 And we do that by using that colon. 78 03:44.500 --> 03:45.220 That's all we do. 79 03:45.310 --> 03:49.480 Let's give it a border of 2 pixels, dashed, tomato. 80 03:50.590 --> 03:51.100 Right. 81 03:51.190 --> 03:52.420 Let's refresh the page. 82 03:52.420 --> 03:59.020 Let's start typing only one character and we can see it's invalid, because the minimum length is not 83 03:59.020 --> 04:03.670 15, but as soon as we write more than 15 characters, it disappears. 84 04:03.670 --> 04:05.560 So it is working pretty, pretty cool. 85 04:05.710 --> 04:08.260 Okay, let's now target 86 04:09.230 --> 04:11.900 the other CSS words. And we're going to do this all in one. 87 04:11.900 --> 04:15.580 It's going to be quite interesting, but why don't we take it step by step? 88 04:15.590 --> 04:15.950 Okay. 89 04:15.950 --> 04:17.600 So if we go textarea, 90 04:19.560 --> 04:21.560 and we go valid, 91 04:23.040 --> 04:27.210 and we go border 2 pixels, solid green. 92 04:27.480 --> 04:33.150 As you can see, it's green on the first default page refresh. 93 04:33.150 --> 04:34.530 And I don't want that to happen. 94 04:34.620 --> 04:37.350 I only want to start validating when the user types in here. 95 04:37.350 --> 04:44.880 And one way to do that, is to say that we only want to target this :valid pseudo class when there's no 96 04:44.880 --> 04:45.820 placeholder shown. 97 04:45.840 --> 04:48.300 Can you see there's a placeholder there, something juicy. 98 04:48.300 --> 04:54.810 But as soon as the user starts to type, it disappears. And we can do that, my dear students, by using 99 04:54.810 --> 04:58.350 the other 2 CSS words .... "not" ... 100 04:58.620 --> 05:03.150 and of course we want to target "not" when the placeholder is shown. 101 05:03.570 --> 05:05.700 I know, it's a weird way to think about it. 102 05:05.700 --> 05:09.170 And then of course we want to target the :valid pseudo-class. 103 05:09.180 --> 05:10.050 So here we go. 104 05:10.050 --> 05:15.590 It's looks nice by default, but as soon as the user starts typing, it's invalid. 105 05:15.600 --> 05:20.520 But when we get to 15 characters or more it's now got the valid formatting. 106 05:20.910 --> 05:22.810 Hey, isn't that cool? 107 05:23.020 --> 05:24.160 Really, really fun. 108 05:24.160 --> 05:25.360 Really intuitive. 109 05:25.360 --> 05:29.020 I want to show you one more example next and I'm going to be using a bit of JavaScript because I want 110 05:29.020 --> 05:31.930 to target the focus events, the blur events. 111 05:31.930 --> 05:33.190 It's going to be really fun. 112 05:33.220 --> 05:34.870 Again, a very, very simple example. 113 05:34.870 --> 05:39.460 It won't be complicated, but hopefully, you know, your skills are just stacking on top of each other. 114 05:39.490 --> 05:40.630 You're just getting better and better. 115 05:40.810 --> 05:43.660 Hope you're having fun, and I'll see you in the next lecture.