JavaScript30 - Day 10

By Camilla Krag Jensen naxoc |

Day 10 of #javascript30 seems simple enough. Check multiple checkboxes when holding shift down. It was pretty hard, though.

This one is a prime example of why only practice makes you a good JavaScript programmer. It's a pretty common UI thing - most email clients use it, so really good call by Wes to include this one in the lessons. I find that in JavaScript there is a lot of UI interaction that I am so bad at because I don't use it in PHP and therefore I just haven't done it enough. And that makes a pretty simple task like this one into something that takes a good while for me to figure out. Should I keep a boolean with state? Should I use slice on the array instead of looping over the whole thing? I simply don't know best practices or pros/cons for these things. This solution loops over the array of checkboxes and holds a boolean if we are in between lasted checked box and the box currently being checked.

There was only one language concept I didn't know that got introduced in this one. And that was that there is a shiftKey property on the MouseEvent. My first implementation had listeners on the keyup and down on the shift key, and it was kinda messy.