Ooh, it's getting cold.
It's getting cold where I am.
And I'm not a winter person.
I love the summer.
Anyway, this challenge, I'm going to warn you up front, it's going to challenge you.
Uh oh.
It's going to be a little bit difficult, but the skills you learn are going to be tremendously helpful
when you start building your own custom forms.
All I want to do is I want to create this toggle button - on and off.
How do you do that?
Firstly, I want to just share a few things with you.
With this, you'll notice firstly that we've got an inner toggle switch, that little round circle and
that moves. When it's on,
I want that shifted to the right.
When it's off, it shifts back to its original position.
The background color of course changes to green.
The other thing that happens is the "off" word changes to "on" and of course when it's off, the on disappears
and we see the word off.
So how can you build this?
Well, I'll give you a few hints on how I did it, but my way is not the only right way.
And that's why I encourage you to give it a go by yourself.
But it can be a little bit tricky, so here are a few hints.
Firstly, I set the input here with its type attribute set to checkbox, so we're actually dealing with
a checkbox.
Secondly, what we have to do then is we have to remove the default styling of that checkbox because
the browser's checkbox is pretty ugly.
Yuck 😝.
Then what I did was I created a label and within the label I have two span tags, one with the word
on, and one with the word off. And I apply unique classes to both of those which I target later with CSS
and the CSS targeting is very simple.
When the checkbox is checked, I want to target the class of "on" and I want to show that.
And when it's unchecked I want to target the class with that span of "on" and I want to hide it.
I want to set its opacity to zero.
So that's how I'm toggling the "on" and "off" word itself.
"Okay Clyde, but how do you create that custom toggle?"
Well, very simply. Once you've hidden the browser's default toggle or checkbox styling, you can literally
just create your own styling.
I use a border to get that nice rectangular border. I set the border radius just to make it curved.
And then how do I do that little black dot in the middle?
Well, I target CSS pseudo elements.
Specifically, I target the ::before pseudo element and within that again I define or create this little
round circle.
And yes, I'm using a bit of CSS here.
We're using the transition property.
So obviously when a user toggles it, that little round inner toggle switch slides to the right, it
doesn't just instantly appear. I know ... I don't want to lose you, but this is a little bit difficult.
Give it a go.
Even if you can only get to the step where you remove the browser's default styling.
That's good enough.
You know, you don't have to know all the CSS.
We're all going to be using the flex model.
But yeah, the most important thing is just try make a start at it
at least. Enjoy what you do.
Put a big smile on your face.
Have fun and I'll see you in the solutions video.
Adios.