Can You Build This? Shift + Click Checkbox Selector – No Libraries!

Hey developers! 👋

I'm currently going through #JavaScript30 — a fantastic 30-day vanilla JavaScript challenge, and today I hit Day 10.

The task?
Recreate that handy Shift + Click checkbox feature you’ve probably used in Gmail, where you can select a range of checkboxes at once.

🎯 The Goal

Let users:

• Click a checkbox

• Hold down Shift

• Click another checkbox

• ✅ Automatically select all checkboxes between them

🧠 What You’ll Practice

This mini-challenge is great for improving:

• Handling multiple checkbox events

• Using the event.shiftKey property

• Tracking user selections between clicks

• Looping through elements conditionally

🚀 Your Challenge
Try building this without any libraries or frameworks — just HTML, CSS (optional), and JavaScript.
Here’s what you need:

1. A list of checkboxes (10+ makes it fun!)
2. An event listener on each checkbox
3. A way to remember the last checked box
4. Logic to check all boxes between the last and current if Shift is pressed.

🧪 Starter Hint

You’ll likely need to:

• Store the last checked checkbox in a variable
• Loop through all checkboxes to find the range using forEach.
• Use a flag (e.g. inBetween) to mark when to check/uncheck boxes

💬 Want Help?
If you're stuck or want to compare your solution later, drop a comment! I’ll be sharing my approach in a follow-up post soon.

🔗 Bonus: Try It Live
I’ve also made a live version of this if you want to test it directly:
👉 GitHub

🕹️ When you finish it publish with the #challengewithubba hashtag, so everyone would be able to see you solution!

🎉 ENJOY!!