Welcome to the solution video, and I hope you learn something new.
Like I mentioned, I want to use a few CSS things.
I want to use the :valid pseudo-class, the :invalid pseudo-class, the "not" keyword and the
:placeholder-shown pseudo-class.
So let's give it a go.
Very, very simple.
Let's start with an HTML page.
We're going to need a head section in here, and of course a style section.
And then let's create a body.
In the body we want a form.
We don't need an action [attribute] here.
And first thing is, first let's create a label.
We can have a "for"attribute, assigned to the value of story.
We want the user to spin us a story.
If we save this, refresh the browser, we can see our label.
Very intuitive.
The next thing I want to do is I want to have a textarea. The name we can give story.
We have to have a name attribute if we want it submitted to the server, right?
I guess here it doesn't really matter because we're not submitting this to a server. I'm just showing
an example of styling, so we can remove it.
The ID just to match it up with the label, we have to use the same value we assigned in the for attribute,
which was "story".
If we save this, refresh the browser, we can kind of see everything pulling together.
But there are more things I want you to do to this textarea, right?
Because if we are wanting a story, the user could just type "a" and submit that.
We don't want that.
We want a minimum length and we also want a placeholder.
Very, very simple.
We just add the attribute minlength.
Remember we discussed it. And let's just say 15 characters long is fine and let's give this a placeholder.
And the placeholder text can just be "something juicy".
How's that?
You know what,
it's actually a bit high.
We don't need 10 rows.
Let's just do 5.
That's better.
We can make it a bit wider.
There we go.
Starting to look nice, but now let's start styling.
The first thing I want to do, is I don't like the hard black text font color, so let's just grab our
body, and change the color
I'll just, you know, I want to show you different ways to do things, which is why I'm doing this.
I don't have to do this.
There you go.
It's just slightly off black, which is quite nice.
So all I want to do in the body. You'll notice that the label is displayed inline by default.
That's why "Spin a story" is showing in the same row as something juicy - as the text element, or the
textarea element.
We don't want that, right?
So we want to grab our label, we want to change the display property to block.
We want it to take an entire row all by itself. And we need some margin on the bottom.
I don't like it so close to the textarea.
Okay, that's already starting to look better.
Let's now just style the textarea itself.
Textarea.
Let's apply a border - 1px solid.
Just off black.
It's quite nice to apply box-shadows, by the way.
Just adds a bit of pizzazz ðŸ¤©.
And again, we can just do off black. How does that look?
Yeah, it's looking good.
And remember how I said by default, there's this resize property, right?
The user can adjust the size of the text box.
We can affect that with CSS.
And it's so easy.
All we need to do is access the resize property, and there are many values.
Here are some that my IDE is already telling us about,
right.
I want none.
Just to show you an example.
Right.
So now the user cannot adjust the size in any way.
All right, my dear students, I want us to use those 4 CSS words.
Which one should we tackle first?
Let's tackle the easiest.
Let's do invalid. Textarea and we tackle the :invalid pseudo-class.
And we do that by using that colon.
That's all we do.
Let's give it a border of 2 pixels, dashed, tomato.
Right.
Let's refresh the page.
Let's start typing only one character and we can see it's invalid, because the minimum length is not
15, but as soon as we write more than 15 characters, it disappears.
So it is working pretty, pretty cool.
Okay, let's now target
the other CSS words. And we're going to do this all in one.
It's going to be quite interesting, but why don't we take it step by step?
Okay.
So if we go textarea,
and we go valid,
and we go border 2 pixels, solid green.
As you can see, it's green on the first default page refresh.
And I don't want that to happen.
I only want to start validating when the user types in here.
And one way to do that, is to say that we only want to target this :valid pseudo class when there's no
placeholder shown.
Can you see there's a placeholder there, something juicy.
But as soon as the user starts to type, it disappears. And we can do that, my dear students, by using
the other 2 CSS words .... "not" ...
and of course we want to target "not" when the placeholder is shown.
I know, it's a weird way to think about it.
And then of course we want to target the :valid pseudo-class.
So here we go.
It's looks nice by default, but as soon as the user starts typing, it's invalid.
But when we get to 15 characters or more it's now got the valid formatting.
Hey, isn't that cool?
Really, really fun.
Really intuitive.
I want to show you one more example next and I'm going to be using a bit of JavaScript because I want
to target the focus events, the blur events.
It's going to be really fun.
Again, a very, very simple example.
It won't be complicated, but hopefully, you know, your skills are just stacking on top of each other.
You're just getting better and better.
Hope you're having fun, and I'll see you in the next lecture.