Come on.
Welcome back.
Super amped [excited].
And unfortunately, my coffee is almost finished 😥.
Anyway, I'm having a lot of fun.
Now I want us to add or target the valid and invalid pseudo classes to just pizzazz this up, to really
add a bit of kazoom, kazam, pizzazz 🤩.
But how should we do it?
Well, I guess there are many ways to do things when it comes to coding.
I'm not saying my way is the only way.
It's just one of many ways you can do it.
And here, remember we've got this span element.
Let me just show you in the HTML, we've got these empty spans and when we put that required word on
the screen, what did we do?
What did we target?
That's right.
We targeted the ::after pseudo element.
Now we want a valid and invalid styling.
But specifically I want a check mark and a cross to display.
And again I want to target a pseudo element, but we've already targeted the ::after pseudo element,
so why don't we target the ::before pseudo element in this case?
And then all we need to do is we need to determine its state and depending on the state we can change
its content property to either a check mark, or a cross. Have you got it?
Not quite. 🤷‍♀️
Don't worry.
I'm going to show you exactly how to do it right now.
So of course, let's go up to our CSS and here let's just put a comment adding valid and invalid
styling.
Because that is what's missing on this cool little signup form.
How do we do it?
Well, the first thing I want to do is I want to set the position property of the span before, to absolute.
And of course, we could just do it like this, before.
But I want to show you how to be more explicit when it comes to CSS selectors. So we can start off at
our input and we can target what?
That's right.
We can target the immediately adjacent sibling span.
And that's what that plus means.
All right.
And like I mentioned, I want to set its position property to absolute.
That's all I want to do
for now.
There's a few more things I'm going to have to add on here.
I'm going to have to adjust its position, right?
I'm going to have to move it left and up.
But let me show you first before I just put figures there.
Let's now target the invalid
pseudo class.
And let's give it a border of 2 pixels, solid red.
Okay, so now we know that these two are invalid, but there's still a problem with this.
If we just left it here, do you notice
you know, let's start typing the name of Wally.
If the user then clicks out of this control,
we get to that red box again. And it's indicating to us that something's either wrong,
I mean, if you recall, that styling actually applies to all our controls that have a required attribute
on them.
We don't really want that.
When the user types something in first name and last name, we want it to become valid, don't we?
And to even be more explicit here, we could have gone inputs where there's a required attribute on
them, and it's invalid to do this.
So we could do that.
But like I mentioned, we want something very similar, but for when it's valid.
So we want inputs
where it's required attribute is set, but this time where it is :valid. Here we can just change its border
property to 1 pixel solid
rgba, let's just go 1, 168, 9, 0.8.
What does that look like?
The user types, Wally,
there we go
and deselects the control.
It's green
now. It's indicating to the user that this is a valid form control.
And this could be enough.
It could be enough.
But I do want to add a bit of pizzazz.
I want to be a bit cool here.
I want to add a little check mark when it's valid and a cross when it's not.
How do we do that?
Well, I've already given you clues, haven't I?
We need to target the ::before pseudo element. So let's first deal when its ...
should we do valid first or invalid?
Let's do invalid first.
So let's target our input where its state is invalid.
But now we want to target the immediately adjacent
sibling span, but we want to target the ::before pseudo element.
And the content we want to put in here could be anything we want.
Right.
If I write "WRONG",
there we go
we've already got the styling there.
But I don't want wrong.
I want a nice cross. And we want it to be red, right?
Color red.
Why is it not working?
Oh, I keep forgetting to put the semicolon there, but we don't want the word wrong.
We actually want a cross.
So I've already got the site here.
You've seen this site before -
toptal.com.
And we can just search here for a cross, I think.
Will that work?
I wonder if we can just type x?
X is better. And then what we can do is we can just highlight it, copy it, go to our text editor and
paste it in here.
We could have just used our keyboard, by the way, maybe there's a better looking one.
I don't know.
Just to show you, let's use a funky, funky looking one.
Let's put that in here in our code.
There we go.
And let's go back to our browser and there's a cool cross.
How awesome.
And because it's position property is set to absolute remember? This is why we did it, because we have
so much control now over where we want that cross.
So for example, let's push it
uh, left by 10 pixels.
Yeah.
And I think we just need to ...
we actually need to bring it down, don't we?
And let's bring it down a bit.
Not too much.
1 pixel, zero.
No, we actually need to push it up slightly.
There we go.
I think that looks perfect.
And of course, when the user starts typing that "X" will remove because it's not now invalid.
Man this is cool.
This is cool.
The last thing I want to do, of course, is now target the input
but where its state is valid. And again, we're going to use the + sign to indicate we're targeting
the immediately adjacent sibling, which is the span.
And of course we're affecting the ::before pseudo element styling. Here, the content we want to be a
tick, right, or a check mark.
I don't know what you call it there where you are. In Africa, we call it a tick, but a tick is also
one of those little creatures that you know, when you're walking through the bush, they can bite
you.
So, yeah, check mark is probably the correct one.
Check mark.
Here we go.
And let's just copy that.
Go to the text editor, and put it in there.
Let's go back to our browser here and start typing and there we go.
But the check at the moment is black, so why don't we just change its color property to green?
Start typing.
How is that?
Woo hoo!
I love it.
How awesome.
You can see how fun this is.
You can see how easy as well as a developer, once you know the tools, there is really no excuse to
have bad forms these days.
It should be very, very easy for your users to come on to your web app and to figure out what you want
them to do.
So, hope you are having a lot of fun.
I hope you're enjoying yourself.
I hope you're enjoying this course and I'll see you in the next lecture.