Coding Challenge SOLUTION # 3 - Switch Toggle

Key Takeaways

okay then so hopefully my friends you've had a good go of this challenge and you've tried to make this toggle now i'm going to show you how i solve this problem all right then so the first thing i want to do is style this thing right here and also this switch and in fact we want to style this checkbox to hide it so let's go over here and underneath this comment first of all i will do a style to hide this checkbox because we don't really need to show it it just needs to be there under the hood so it's getting checked and unchecked when we click on our actual switch so we'll say toggle which is this div surrounding the whole thing right here and then inside that we want to grab the input and all we want to do is set the height to zero and the width to zero and it's not going to show on the page there all right so next i want to target the toggle switch so remember this is the actual thing that's going to look like the toggle switch that we're clicking all right so we need a few styles for this first of all we want to display this as block and then after that i'm gonna give it a margin of 100 pixels top and bottom auto left and right that just brings it 100 pixels down from the top of the page and centralizes it in the center as well all right so after that i want to give this a width now i declared those as variables up here so this is the width of this kind of switch thing the toggle itself and this is going to be the height so i can use that saying var and then the variable name which is double dash toggle hyphen width like so so that's the width of this switch which is 80 pixels the height as well is going to be this variable toggle height so let's do that height and we'll say var toggle height like so okay so after that i'm going to apply some padding to this which is going to be 5 pixels all the way around so basically that little circle inside the switch is going to come away from the edges because we have this padding right here all right so after that i'm going to say cursor is pointer so that when we hover over this we see that little hand and we know we can click it then i'm going to give this a background color so background and it's going to be this variable right here now to begin with it's going to be this off state right here but then when we click it on later on it's going to change to this but to begin with it's going to be this color right here so let's say the background right here in fact let's say background color like so is a variable and it's going to be the off variable to begin with all right so after that we'll say border hyphen radius is going to be 40 pixels so that's just to soften up the edges and make it look like a pill in shape and then also i want to give this a position of relative and we'll need that later on because we're going to position something absolutely inside this and i'll explain that later as we do it but for now just give this a position of relative and then also i'm going to add a transition property to this to say all e's and 0.3 seconds now why am i doing that well the background color is going to change as we switch it on and off and i don't want it to be instantaneous that change i want the transition from the off to the on color to transition over a period of three seconds using this easing function right here so that's what that does for us it kind of fades the colors from one to another rather than just kind of clicking them from one to another it looks a little bit nicer okay then so let's stop there for now and just take a look at this in the browser all right then so now we have this switch background that looks like a great pill and the input the checkbox is hidden but if i inspect and then go to the checkbox i'm going to untick the height and width we can see over here right now at the minute when we click on this it's not checking this but we're going to solve that problem later for now what i'd like to do is style a little white ball in here which when we click on this is going to slide to the right to show that the switch is on and then when we click again it's going to slide back to the left and also when we're clicking it it's going to fade the background of this to purple when it's on and then back to gray when it's off so let's create that little white ball first and then we'll look at creating the background change as well all right so how are we going to create that little white switch ball thing well we could add some more html inside this but what i want to do instead is use a pseudo class which is the before pseudo class on the switch and that allows us to add a little bit of content before the switch in the dom and then style that so the way we're going to do this is come down here and say dot toggle dot switch and then a colon and then before so this is the before pseudo class and it allows us to inject some content into the dom which for us is just going to be an empty string something completely empty but what that does is inject that content and then it allows us to style it as a separate element on the page so we'll say display this as block and then we want to give this a height now the height of this is going to be the same as the toggle height so we can copy this and paste it in right here i remember it's going to have some padding in here so that the ball doesn't go right up to the edge of the background of the switch all right so after that we want to give this a width as well and the width is actually going to be the toggle height as well because we want it to be a complete circle and for it to be a complete circle we also need to give this a border radius so border radius is going to be 50 percent like so we'll give this a background color as well so background color is going to be fff which is white and then i'm going to give this a position of absolute so this is why we needed this position right here of relative because we're positioning this thing the little circle absolutely relative to the switch right here okay so we position this absolute and from the top we're going to say it's 5 pixels to bring it down from the top of the background and then from the left it's going to be 5 pixels as well and then also i want to give this a transition property to say all e's and 0.3 seconds and the reason we're doing that is again so that when we're moving this little white ball from left to right and back again it transitions it doesn't just click into each of those places it kind of animates from one to the other all right so let's save this and check it out in a browser so far all right so in the browser it's looking alright but at the minute no functionality is there when we click on this we don't get any other state and also if i show the switch the actual import let me just bring this onto the page when i click on this at the minute it's not being checked or unchecked and that's because this thing right here has no relation to this thing so the first thing i want to do is make it so that when i click on this it toggles this checkbox and to do that we're going to use a label tag in the html so what we're essentially doing in the browser is clicking on this div and we want it to then check this and then when we click on this again uncheck this but at the minute there's no relation between this and this they just sit next to each other in the html but nothing is kind of grouping them together to say look if you click on this then i want you to check this and when you click on it again i want you to uncheck it so the way we can kind of implement this is by using a label and we don't need this for attribute we can get rid of that and if we take the label and we wrap both of these things what we're essentially doing is grouping both of these together we're assigning a label to the input now when we click on a label which is assigned to a specific input field then it activates that input and in the case of a checkbox it's going to check it now when we click on the label again it's going to uncheck it and so forth so let's save this and try it out in a browser so first of all make sure your checkbox is showing and then when you click on this notice it checks it and when you click on it again it unchecks it so now we're kind of associating those two things together by wrapping them both in that label tag now then the next step is to style this so that when we click on it and this becomes checked then we want the background to be purple and we want this white ball to move to the right and then when we check on it again the white ball moves back to the left and the background goes gray again now how do we do that well we can make use of the checked status of this input because it sits next to this div in the dom and that means that we can use a specific pseudo selector to say look when this is checked take your sibling element the thing that sits next to you and style it differently and when it's unchecked then take this and style it differently again so we can use this checked status to style this thing differently so it has two different states so then what i want to do is basically style this switch differently and also this before element as well which is the white ball differently when the input is checked so the pseudo class we can use to check that the input is checked is just the checked pseudo class so what i can do is come down here and say dot toggle and then look for an input that is checked right so when the input is checked then we can use the sibling selector which is plus and that says okay well look for something that's sitting next to this directly next to this in the dom and that's going to be this so look for the dot switch class next to that when the input is checked so when it's not checked it's just going to start the switch like this and also the before element like this but when it is checked we're going to style the switch differently all right so all i want to do is change the background color so we'll say background when the input is checked is going to be something completely different it's going to be a variable and it's going to be the on state which is kind of like this purple color right here okay and remember it's going to fade to that because we have this transition property so that's the first step the second step is to also style this differently so it's on the right when we have a checked input so let me copy this and come down here and then just add the before sudo to this to target that white ball all right then so what do we want to do here well all we want to do is move it over to the right so to do that i'm going to use the transform property and we want to translate it in the x direction a certain amount now we're going to use the calc function to calculate how much it needs to translate in that x direction so we basically want to say let me write this out and then i'll explain it take a variable which is the toggle hyphen width so that's the width of the whole toggle the whole kind of switch if you like and i want to minus another variable value which is the toggle height so let me put that in there i remember the toggle height is actually the width as well of the ball we said the width is the toggle height so what i'm doing is translating the x-coordinate of this ball and we're saying translate it by this amount right here so we take the whole width of the switch the background pill thing and then we minus the width of the ball essentially so we're moving it over to the right that amount we have to minus this width of the ball otherwise it will go kind of off the edge of the pill okay so let me save this and see if it works all right then so in a browser if i click on this now we can see the background animates the purple and the ball goes all the way to the right and if we click again it goes back to the default state and so forth and also if we inspect i'm just gonna get the check box and bring it back onto the page we can see it's checked when it looks like this when we click it again it becomes unchecked and so forth awesome so now this is all working [Music] you