Did you give it a go?
I hope so.
But if you didn't, or you weren't quite sure where to go,
don't worry.
I'm going to go through everything with you right now.
It is quite a difficult one.
There is a lot of CSS you need to know.
And if you're not experienced with CSS, it might be a bit tricky.
But anyway, have some of your coffee.
This is still the same one.
I'm going to stick with it through all of these challenges.
Mmm it's good.
It's good.
Let's begin.
As always, I want to start with an HTML document.
We're going to create a head and style section, because, yes, we're going to need to plug in a lot of
CSS.
We could put it in an external CSS file.
It's just one checkbox, so I don't want to do that.
Then we can create a body section. Within the body, of course,
a form.
And within the form
we want a checkbox.
And I just want to stop here, and I want to remind you that when it comes to developing something or
designing something, there are many, many different ways to do something.
So here what I want to do is I want to wrap everything within a UL element, and specifically in a list
item.
I just do this because when it comes to styling and with CSS, I can just target these elements very
easily to make it look nice.
But really it's not the only way to do this.
And what do we want next?
You guessed it, we want an input, but this time of type checkbox. We can just give it a name of power
and an ID of power.
If we save this, refresh the browser, save this, refresh your browser, and
there we go.
And yes, we've got that bullet point because this is an <li> element.
Don't worry, we're going to deal with styling shortly.
And of course we've got the default checkbox that the browser provides us.
Again, we're going to be changing this completely.
Okay, so that's our input.
Let's just make this edit a bit bigger so it's a bit more clear.
Remember in the intro to this challenge, we saw the word "on" and "off" right, when the power toggle button
goes on and off.
So how can we create that?
Well, very simple.
Why don't we put it in a label?
The for attribute of the label has to match the ID of the input, which we called power.
And now I actually want to wrap ... why don't we wrap that word "on" and "off" in a span?
Okay, so we've got a span. And this one can be on. And let's create another span,
span,
and this one can be off. If we save this and we go to our browser,
look, there we go.
We've got the on and off. And obviously we want to target only the on when it's on, and the off when it's
off.
In order to do that, we let's put a class on each span.
Let's go back to our editor here and this span can have a class of "on", and this next span can have a
class of "off".
Okay right now this does nothing.
Let me show you.
There we go.
It's done nothing.
But, in terms of our code, it's doing a lot, isn't it?
Because now we can target these with CSS.
Now, how are we going to do the CSS?
Well, let me start off by saying that we are going to be using flexbox.
Don't worry if you haven't done flexbox before. This course
you know, it's not about CSS and detailed CSS.
I'm just showing you how you can go about doing it.
But very, very basically, you can view flexbox kind of as an entire module and not a single property.
And what I mean by that is that you've got a whole lot of properties you have to deal with when dealing
with flexbox, for example, some properties you need to set on the parent, aka the flex container
and other properties you need to set on the children within that container, aka the flex items.
But anyway, I'm going to be showing you exactly how this works as I go on.
But in order not to distract you, let me remove myself and let's concentrate on the CSS.
Okay?
So let's get into it.
We've got our style section up here.
Let's put our browser side by side, so
you can see what's going on as we style.
It's always very helpful, especially when you just start out. Okay, the first thing we want to do is
we want to deal with our list item element, don't we?
First thing I want to do is let's just affect its width to 100 pixels.
And now remember I said I want to use flexbox, so let's set up flexbox.
Okay.
In order to that, we set its display property to flex.
Doing that removes that bullet point, which is really, really cool.
Then I want to just align items to the center.
Let's justify content.
That's always a good thing.
And you can see there how the browser has added space.
So this justify-content property,
it defines how the browser distributes space between and around content items along the main axis of
a flex container.
And when we set this property to space-around, it just evenly distributes each line with equal space
between them.
Okay, so that's all that that does.
Anyway, I don't want to harp on too much about that. And then position
I want to set this to relative.
What do I want to do next?
Let's work with that label.
Let's size the label, and let's make the on and off parts sit on top of one another using positioning.
Remember we put the on and off in that span.
Let me just scroll down here.
In that span.
Well, I want us to use absolute positioning so they're not next to each other.
They are literally in the same place.
So I'll show you how we can do that now.
Firstly, let's target our label.
Okay, Let's give it a width of, say, 20 pixels.
The height of 20 pixels and a line-height of, you guessed it, 20 pixels.
I'm just trying to make sure everything is uniform and in center.
That's all I'm trying to do.
And you'll see how it all works and fits in shortly.
Then, as I mentioned, I want to target our label and then a descendant of this label is a span, and
that's the span I want to set its position property to absolute.
That's what I was meaning when I wanted them on top of each other.
So now you can see the "on" and the "off" are literally on top of each other, which is great because we're
only going to be showing one at a time.
Okay, well, what is next?
Well, the next step, my dear students, is to custom make our toggle.
And in order to do that, remember what we have to do.
First, we have to remove the default styling of the checkbox that's given to us by the browser.
So that ugly little square there,
we want to remove entirely.
And then what I want to do is I want to target the ::before and ""after pseudo elements to create our custom
toggle, right?
So it's not that difficult.
Let's give it a go.
Let's just do a comment here.
It's always good to comment your code, by the way.
So what I want to do is I want to remove the default styling
of the checkbox using the appearance property, and create the outer
toggle area.
There we go.
That's what we're going to do now.
Right.
But how are we going to do this?
Well, in order to start, we need to remove the default styling of the input of type checkbox.
So let's target the input where its type is set to checkbox.
We're being very explicit here, and we want its appearance ... appearance, to be none.
There we go.
We've removed it.
Okay, so there we go.
We've removed the default styling.
Very, very simple.
But what I want to do now is I want to create our own custom design of the outer toggle.
I'm not talking about the inner little round circle.
I'm talking about the container for our toggle.
So let's create that now.
And what's really cool is it's so, so easy and this is how much power we have as developers.
It's really, really awesome.
Let's just create a border: 2px solid black.
How does that look?
There you go.
Just basically a black dot.
And I don't want it to be square.
And in order to change its kind of squareness to more round, we change the border-radius property and
that comes down to personal preference.
I'll just set it at 12 pixels.
How's that?
So it's a round circle, but of course we are designing the container, right?
So that's way too small.
So let's set its width to 44 pixels.
Better and let's define its height.
Let's make that 24 pixels.
How cool is that?
You can see it's coming along.
Wow.
It's so nice when when things happen in an orderly fashion.
Let's now change the background color.
Okay.
We can just change it to triple "e",
ehw's that?
Yeah, it's like a nice, light gray.
I think that's cool.
And then we don't want things to just happen instantly.
We want things to transition.
It just looks cool when you actually see things move.
So all the CSS properties related to this, and that's why I'm using the word all, I want
any change to transition in 0.4 seconds. Right now, of course it doesn't do anything because when we
click on this toggle, nothing happens.
But that is going to change shortly, my dear students.