CSS Lightsaber Checkbox ― Scotch

Welcome to our Code Challenge #3. Way back when about five years ago when we started Scotch.io, one of our very first articles was to create lightsabers using plain CSS.

Let’s bring that back and see how we can build out the same thing in this week’s code challenge.

The Challenge

The challenge is to rebuild this lightsaber checkbox. Go ahead and use CodePen as your code playground and be sure to share the CodePen and what you learned in the comments.

Requirements

Make sure that you have the following elements:

All CSS: Animation of the checkbox and also checking and unchecking are all done in CSS
HTML Checkbox: Use a <checkbox> and <label>

Bonus: Add the Lightsaber Sound

One bonus that could be fun if you want that extra challenge is to implement the lightsaber sound when you click the checkbox. whoooosh

Here’s an audio file you can use. You can bring JavaScript in for this part of the challenge.

https://scotch.io/files/lightsaber.wav

Resources

If you get stuck on creating the CSS gradients, here are a few to get you started:

.yoda {
    background: rgb(135, 220, 90);
    background: linear-gradient(
    to right, 
    rgb(135, 220, 90) 0%, 
    rgb(254, 254, 254) 30%, 
    rgb(254, 254, 254) 50%, 
    rgb(254, 254, 254) 70%, 
    rgb(135, 220, 90) 100%
  );
}

.vader {
    background: rgb(229, 17, 21);
    background: linear-gradient(
    to right, 
    rgba(229, 17, 21, 1) 0%, 
    rgba(254, 254, 254, 1) 30%, 
    rgba(254, 254, 254, 1) 47%, 
    rgba(254, 254, 254, 1) 71%, 
    rgba(229, 17, 21, 1) 100%
  );
}

.windu {
    background: rgb(202, 116, 221);
    background: linear-gradient(
    to right, 
    rgba(202,116,221,1) 0%,
    rgba(254,254,254,1) 30%,
    rgba(254,254,254,1) 47%,
    rgba(254,254,254,1) 71%,
    rgba(202,116,221,1) 100%
  );
}

Community

Join us on the Slack group in the #codechallenge channel.
Post your solutions in the comments.
Post your solution on Twitter with #scotchchallenge

Solution

Solution video and code will be posted on Monday. Happy coding!