Are you following me? Are you following?
Please don't get lost in the detail.
Let me just expand this quickly and let me just give you a summary of what we've done.
Okay.
Well, firstly, let me scroll to the bottom here.
Our HTML is very simple, right?
We've just got an input, and a label. Within the label,
we've got our on and off words and we're going to change the styling of those shortly.
Right now we can see both on the screen.
So we've got an input of type checkbox. And then at the top of our file we are slowly starting to style
this checkbox because we don't like the default styling provided by the browser.
The first thing we did was we defined kind of this flex layout.
It just helps me center things, add spacing etc.
It just makes it look nice effectively.
But you didn't have to even do this. The next, or the more important things that we did, is we removed
the default styling of the browser's checkbox. And then we've started to create our own styling.
So what is the next step?
You've got it.
The next step is to create that little round circle within the toggle, right?
Because we want that circle to start at the left.
And then when we toggle it on, we want it to transition nicely to the right.
And of course we want the background color to change.
So that's what we want to do.
How can we do that?
Well, why don't we target the ::before pseudo element and use that to put in, you know, this little
round toggle button?
Let me show you what I mean.
So firstly, again, let's have a comment here,
"style the ::before content to look like the inner toggle switch",
right.
And that's the bit that moves.
That's what I mean by the inner toggle switch.
All right, let's do side by side so you can see what's going on as we go.
Firstly, we want to target the input where it's type attribute is set to checkbox.
We're being very explicit here and then we want to target this ::before pseudo element. It's content property
we can set to nothing.
Um, what should we do?
Background color,
is black.
Let's set a width of 16 pixels, a height of 16 pixels.
A border-radius, because we want it round, remember?
Border-radius of, say, 16 pixels.
Position can be absolute.
I often do
absolute.
I should have maybe done this earlier than you could have seen what I was doing.
I often like absolute because then we have a lot of control over where our design is taking place.
You can see now it's positioned absolute, so it's at the top-left of the container element or of the input
type checkbox element.
And then of course, what's nice with absolute is we can be very explicit, you know, we can move it
down and we can move it to the right.
Let's see if that makes sense.
There you go.
How does that look?
I think that looks awesome.
And then remember what we said,
I want things to transition.
Okay?
I want all CSS properties to transition 0.4 seconds.
And of course, now even when we toggle this and check it, nothing happens because we haven't defined
any CSS.
So let's do that quickly.
But you can see how quickly this this happens, right?
It's so, so fun.
Hope you're enjoying it.
So now what we want to do is we want to change the outer background color and move the inner toggle
switch
when the checkbox is checked.
And we want to use transitions for smooth animation.
So that's a hint.
So can you figure out how to do it?
Firstly, what pseudo class should we target?
What should we target?
That's right, the :checked pseudo class.
So let's target the input with its type attribute is set to checkbox, and we want to now affect the styling
when it's checked.
So we're targeting the :checked pseudo class.
What's the first thing we want to do?
You've got it.
We want to affect the background-color, right?
And we want this to be a nice, cool green color.
There's lime.
I don't know if lime would look nice.
Let's see.
It's a bit too green hey.
Maybe we do it,
a bit lighter.
How's that?
We'll run with that.
That's okay.
But you'll notice now that, of course, it's happening instantly.
And remember, I gave you another hint.
I said, let's use the transition property so we can smooth our animation.
So let's do that transition.
And I want to transition all CSS properties to 0.4 seconds.
Now when we toggle on and off, can you see how like it's so cool, right?
It kind of fades in.
Yeah.
And I love this stuff.
Ooh, more coffee.
Get the brain juices cranking ⚙.
We're not quite done, are we?
Because when we toggle this, the color changes, but the inner toggle switch doesn't move.
So how can we make that move?
Let me give you a clue.
Well, firstly, how did we define the inner toggle switch?
That's right,
we used the ::before pseudo element. And remember how we've positioned it
absolutely.
And we shifted it slightly right by this left property.
And what's really cool is if we change the left property to say 34%, we can see the toggle is in the
right position all the way, pushed to the right.
So somehow we need to change this left property and define its value to be 34%.
How do we do that?
Very, very simple.
Right?
All we need to do is we need to target our input element where its type attribute is set to checkbox.
And we only want this to apply, right, shift to the right, when it's .... ooooo, I almost almost dropped my coffee.
Whew.
That would have been horrible.
We only want that inner toggle switch to shift to the right when we are in the checked state.
So we want to target the checked state, and we only want to affect the ::before pseudo element.
So here you can see we are kind of combining CSS pseudo classes and elements.
It really is neat. And we want to change the left property.
I know I said 34%.
Why don't we just do 35%?
It doesn't really matter.
Now, if I toggle this, look what happens.
Woo hoo!
How awesome is that?
How awesome.
Come on, my dear students, you got to love this.
There's only one more thing to do now, and that is display the "on" and "off",
depending on whether we're in the checked state or unchecked state.
How can we do that?
It's very, very easy.
Let me show you.
All we have to do.
Oh, well, you know what?
Let me have another comment.
Okay. Let's do another comment here.
Let's cause
the on and off parts of the label to be visible when the checkbox is checked and unchecked respectively.
We're going to use ...
here's your hint,
here's your tip ...
we're going to use the general sibling CSS selector, which looks like that,
to select all siblings of a specified element.
Okay, so that's your tip.
Do you want to give it a go before I show you the solution?
Well, it's very simple.
The first thing we want to do right, when the user logs on, is we know it's in an off state.
So we want to target the span of class "on" and we want to set its opacity to zero.
So input,
right, and we don't need to specify the type because it is the only input,
but obviously you're going to be dealing with more complex forms in the real world.
So that's why I'm specifying this type.
But we could easily just have input.
Okay, but let's do more specific targeting with type set to checkbox.
So now we've targeted the input and I want to target a sibling, and the sibling I want to target is the
label.
And within the label we've got a descendant being that span element where its class is set to on.
And that, my dear students, is what I want to target.
Now there's something else we have to do, but let me first show you this, and I want to set its opacity
to zero.
If we save this, and look at the browser,
how cool does that look?
Okay.
And it looks like we are set, but you'll see that there's something else we have to do as well. Because
when the user toggles this, and clicks the button, nothing happens.
Right.
And in fact, when this is checked, do you agree with me that we don't want to see the "off". So when
it's checked, we don't want to see the word "off"?
So we also want to set its opacity to zero.
So there are two scenarios we're targeting here.
The first scenario is where it's not checked.
We want to hide the on. And when it is checked, we want to hide the off.
So let's do that quickly. So we can separate out different stylings by a comma.
And now what we want to do again, we want to target the input where its type is set to checkbox.
But remember, when it comes to that "off" word, we want to target the state when it's checked. And then
we can apply the same logic.
We want to find the sibling of label, but this time with the span of class "off" and we want to set the
opacity to zero.
So when we go to the browser, we toggle this, it disappears.
How awesome is that, my dear students.
Man, this is cool.
And then finally, we want to apply the same logic to show the "on", right.
How do we do that?
Well, let's target the input where it's type is set to checkbox.
You can see how intuitive this is, by the way, as you get more and more comfortable with coding,
these things are very quick to implement.
We want to target now the checked state and of course when it's checked we want to target the label,
but this time we're targeting the span of class "on". And here we want opacity of ... drumroll 🥁 ... you guessed
it, one. And when the user toggles on and off, it works as expected.
Come on, my dear students.
Wow.
Isn't this so, so awesome?
I mean, let's just expand this browser.
How cool is this?
You've literally created your own custom toggle button.
And don't take this information for granted.
What you're learning here, these little pieces of information mean you can literally apply it to your
own forms.
You don't have to use the ugly default styling that the browser gives you and in fact you shouldn't.
And as you become more comfortable with coding, really it only takes you another ten minutes of your
time to create really intuitive and easy to use buttons on your form.
Hope you're having a lot of fun, but we're not yet done with this challenge section.
There are still a few more challenges I want to "challenge" you to, so see you in the next one.