JavaScript 30 — Day 10 — Hold Shift and Check Checkboxes
Thankfully this exercise has a nice and descriptive title.
Indeed it seems simple enough but requires a little bit of a pause to think about how exactly you wish to tackle the problem.
The goal is to have the user be able to check a box, hold the Shift Key and check another and have all the ones in between get checked as well.
I was pretty pleased when I was able to get my own solution without any peeking at the answer key.
My approach was to add event listeners to handle the Shift key presses and then others for each of the checkboxes on ‘change’ and then some conditionals to handle the logic.
While it did work, it was slightly messy.
What I learned from the answer is that the ‘click’ event is pretty nifty in this. It triggers the Pointer event when the checkbox is clicked which not only triggers when we want it but actually has a built in shiftKey = true || false property.
That certainly shaved a few extraneous lines off the code.
My solution was still a little different from Wes’ and I’m happy with it because it was my own.
My solution (markup is omitted because it doesn’t really matter):
Wes’ solution (perhaps more elegant but partially harder to logically follow at times):
