Thank you.
Thank you for sticking with me.
Thank you for all your support.
I hope you're having a lot of fun and I hope you are learning a ton of useful information.
So here we go.
Here is a very simple challenge.
I want you to create a textarea element.
Don't worry about submit buttons and submitting the form.
I just want to talk about styling this textarea element. And you can see here, we're asking the user
to spin a story, something juicy.
So you'll notice that we have a placeholder.
The other thing I want you to implement into your textarea element is a minimum length.
Let's just say the minimum length should be 15 characters.
Now, when the user doesn't have 15 characters, I want you to target the :invalid CSS pseudo class to
style the border slightly differently. And when it is valid, I want you to style it appropriately,
maybe with a green border. But there's some other slight nuance and that is, before the user starts
typing in this form, I want the styling to be neutral, which it is now.
So as soon as the user starts typing, remember I said I want us to have 15 characters minimum.
Can you see we've got a red dashed border to display that
it's not valid yet, but as soon as we hit the 15 character mark, it then changes to a green border.
Of course, if the user deletes everything and he doesn't want to submit the form, then he can do so.
And it's not invalid, right?
It's only if the user wants to type something, where we want this validation to take place.
So can you give it a go?
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,
we're going to be using the "not" keyword in CSS as well as the ":placeholder-shown" CSS pseudo-class.
It's going to be a lot of fun.
Give it a go by yourself, even if you can't do the whole thing, and I'll see you in the solution video.
Ciao.