My dear students, welcome back to this awesome, awesome section.
And we're going to be doing some challenges in this section, some really fun challenges.
But, you know, they shouldn't take us very long.
Nevertheless, I hope you've got some coffee.
Keep amped.
And let's begin.
Let's begin with this very first example of creating an email field.
And all we want to do is we want to visually show the user when it's invalid and when it's valid.
And to do that, as you know, all we have to do is target the CSS pseudo classes :valid and :invalid.
And of course we want to make this a required field.
It's very simple, but let's get into it.
I've got Visual Studio Code here, I've got the browser, I've got some coffee.
Let's go.
Oh man, that's good.
That is so good.
And yeah, let's begin.
Let's create a very, very simple HTML document.
Within here we are going to have a head section. And within the head section, we're going to have a style
tag because that's where we're going to put all our CSS.
But for now, let's ignore that.
Let's create a body. In the body,
let's create a form.
In this form,
I want to be very simple.
All we want is a label and we can say for email and of course the content within the tags, we can say
email required.
We save that and there we go.
Very, very simple.
Nothing you haven't seen before.
And of course we want to create our actual input with type of email.
Its name attribute
we can leave blank, and ID has to match the labels of the "for" attribute,
remember which we said was email.
So there we go.
Pretty straightforward.
Firstly, I want this to be defined as a required field.
How do we do that?
That's right.
With the required attribute.
It is really, really that simple.
The next thing I want to do is now affect the styling, because right now it is hideous and in fact
the user doesn't know whether it's valid or invalid.
So let's start styling it up.
Firstly, let's just add some padding everywhere.
Padding .5em.
Yeah, it's better.
And let's add some padding as well in the actual input itself.
Padding ...
we don't want to go overboard.
Let's just add a bit of padding. It's all these little nuances, these little tweaks that really do make
a form pop.
The first thing I want to do is I want to style the :invalid pseudo class.
All we need to do is target our input. And we could even be more explicit with CSS selectors like saying
it's type has to be email.
And then we want to target, of course, the :invalid pseudo class.
And all we want to change here is the background color.
Let's
just go lightcoral.
How does that look?
There we go.
Very, very simple.
Right?
But just FYI, because this is the only input we have on our form, we don't even need to be this explicit
by setting its type email. We can just target all the inputs on our form with type :invalid and nothing
changes.
How awesome.
(sound effect: Mission completed)
Very, very cool.
Because now if the user types abc@abc.com, we can see that the :invalid pseudo class does not
apply - it's switched off - and that's why the red background disappears.
So that's very simple.
Oh, the other thing I wanted to show you, if we don't have this required attributes, what do you
think will happen to the :invalid pseudo class?
So let's get rid of it, save it.
And it's gone because now it's not required.
So it's not invalid.
Interesting.
Finally, just to finish this off, we're going to target now the :valid pseudo class.
And of course, we just want its background color to be like a light green.
The user now types abc@abc.com.
Boom ðŸ’¥.
There you go, my dear students. That's how easy this first example was.
I'm just getting you used to targeting these pseudo classes, because when you work with forms, targeting
these classes becomes crucial and it really does create a nice user experience.
But anyway, I hope you are warm.
Hope you're ready.
I'll see you in the next challenge.