Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
There were a couple of fun challenges in the CodePen community this week!
The rules of the challenge:
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
The CodePen community came through with clever suggestions! You can check them all out in the replies to the tweet, but here are two of my favorites:
Krisztina later shared her animated solution:
See the Pen Animate section out by splitting it horizontally in half by Kriszta (@vajkri) on CodePen.
One of the great things about these kinds of challenges is the reminder that there are so many different ways to accomplish the “same” thing with code.
Another great thing is knowing that there are so many very generous and skilled people on CodePen, ready to answer any frontend challenge 😉