Coding Challenge #3 - Toggle Switch

Key Takeaways

okay then my friends so in this challenge I'm gonna ask you to make a simple toggle switch just like this using a checkbox input field and some CSS so no JavaScript whatsoever just HTML and CSS now to begin with that's going to look something like this in a browser just an ordinary checkbox so what I want you to do is take this checkbox and make a toggle switch like this based on that checkbox now one thing to note it's not the check box itself that's being styled to make it look like this the checkbox is just there under the hood for the functionality of being checked as the actual form field when we toggle the switch on and off so when we toggle it on then the checkbox is essentially tipped and then when we toggle it off the check box becomes unticked and I can demonstrate that by revealing the checkbox itself using the dev tools which are on my other screen which is why you can't see them but now we can see the check box on the page and notice how when we toggle the switch the check box is getting toggled as well so you need to think about how that can work because without the checkbox itself this toggle right here is pretty meaningless the checkbox is the thing that gets updated in the background but it can be hidden by the CSS so I've prepped the starter files for you already and you can find those on the code challenges GitHub repo right here I'll leave the link to this down below the video and to download the starting code for this challenge go to The Challenge three star branch and then just hit the green code button and download a zip folder of this Branch once you've done that you can unzip the folder and open it up in a text editor so then in this starter project we've got just two files an index.html file and a styles.css file in the HTML file we're linking up to the CSS file in the head and inside the body we've got some simple HTML as well to get you started a div with a class of toggle and inside that a checkbox input and another div with a class of switch so this toggle div is just the toggle container to group everything together and this switch div is going to be the actual thing you style to make it look like a switch now if you want to completely change this HTML that's fine there's more than one way to approach this Challenge and likewise you might need to add some more HTML to this as well for everything to work now in the CSS we have just a simple body style giving the whole page a background of Gray and a root selector to register some CSS variables and on state color and an off State color and the toggle width and height values now you don't have to use these if you don't want to you can use whatever values that you want I just wanted to leave them here in case you did want to use them anyway that's pretty much it for the challenge have a good go at it and remember it's CSS and HTML only no JavaScript and if you do solve it feel free to link a solution Your solution Down Below in the comments good luck and I'm going to be back with my solution pretty soon