Friday, 16 February, 2018 UTC
Summary
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 Items: Extras
One bonus that could be fun if you want that extra challenge is to implement the lightsaber sound when you click the checkbox.
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%
);
}- Join us on the Slack group in the #codechallenge channel.
- Post your solutions in the comments.
- Post your solution on Twitter with #scotchchallenge
Solution video and code will be posted on Monday. Happy coding!