WEBVTT

0
00:00.380 --> 00:01.280
Thank you.

1
00:01.310 --> 00:01.730
Thank you.

2
00:01.730 --> 00:02.930
Thank you for sticking with me.

3
00:02.930 --> 00:04.310
Thank you for all your support.

4
00:04.310 --> 00:08.750
I hope you're having a lot of fun and I hope you are learning a ton of useful information.

5
00:08.750 --> 00:09.620
So here we go.

6
00:09.620 --> 00:11.360
Here is a very simple challenge.

7
00:11.480 --> 00:14.510
I want you to create a textarea element.

8
00:14.540 --> 00:16.850
Don't worry about submit buttons and submitting the form.

9
00:16.850 --> 00:22.730
I just want to talk about styling this textarea element. And you can see here, we're asking the user

10
00:22.730 --> 00:25.100
to spin a story, something juicy.

11
00:25.100 --> 00:27.110
So you'll notice that we have a placeholder.

12
00:27.110 --> 00:33.770
The other thing I want you to implement into your textarea element is a minimum length.

13
00:33.770 --> 00:36.740
Let's just say the minimum length should be 15 characters.

14
00:36.770 --> 00:44.060
Now, when the user doesn't have 15 characters, I want you to target the :invalid CSS pseudo class to

15
00:44.060 --> 00:49.820
style the border slightly differently. And when it is valid, I want you to style it appropriately,

16
00:49.820 --> 00:54.800
maybe with a green border. But there's some other slight nuance and that is, before the user starts

17
00:54.800 --> 00:58.070
typing in this form, I want the styling to be neutral, which it is now.

18
00:58.070 --> 01:02.960
So as soon as the user starts typing, remember I said I want us to have 15 characters minimum.

19
01:03.980 --> 01:07.940
Can you see we've got a red dashed border to display that

20
01:07.940 --> 01:15.590
it's not valid yet, but as soon as we hit the 15 character mark, it then changes to a green border.

21
01:15.620 --> 01:20.990
Of course, if the user deletes everything and he doesn't want to submit the form, then he can do so.

22
01:21.380 --> 01:23.060
And it's not invalid, right?

23
01:23.420 --> 01:27.680
It's only if the user wants to type something, where we want this validation to take place.

24
01:28.220 --> 01:30.290
So can you give it a go?

25
01:30.320 --> 01:36.140
I'll give you a hint ... there are 4 CSS words you're going to have to use, it's going to be :valid, :invalid,

26
01:36.140 --> 01:44.570
we're going to be using the "not" keyword in CSS as well as the ":placeholder-shown" CSS pseudo-class.

27
01:45.050 --> 01:46.100
It's going to be a lot of fun.

28
01:46.130 --> 01:50.660
Give it a go by yourself, even if you can't do the whole thing, and I'll see you in the solution video.

29
01:50.690 --> 01:51.260
Ciao.