Focuslock

🌟 Inspiration

We often struggle to focus while studying online, as distractions like social media and random browsing take over. We wanted to create a tool that keeps us locked into one study tab, holding us accountable and tracking our attention span.

🎯 What it does

FocusLock lets you paste your study URL (e.g., YouTube, ChatGPT, Docs). Once the session begins, the app tracks if you leave the tab. If you do:

• It immediately alerts you with a warning sound.
• It records how long you were distracted.
• It displays a real-time log of your distraction time.
• You get a final report after your session ends.

🛠 How we built it

We used:

• HTML, CSS for structure and styling
• Vanilla JavaScript for tab monitoring, sound alerts, timers, and logic
• Web APIs like visibilitychange, focus, and blur for tab detection

🚧 Challenges we ran into

• Accurately detecting tab switches and avoiding false alerts
• Making the UI user-friendly under time constraints
• Synchronizing sound alerts with distraction timers

🏆 Accomplishments that we're proud of

• Real-time distraction tracking works seamlessly
• Built the entire system in a single day
• Clean UI with zero frameworks

📚 What we learned

• Deeper use of JavaScript browser APIs
• Real-world web behavior tracking
• Balancing UX and functionality under a deadline

🚀 What's next for FocusLock

• Add Pomodoro-style timers
• Create a leaderboard to gamify focus
• Allow login and user tracking
• Chrome extension version
• Daily focus progress dashboard

Built With

• css
• focus
• html
• javascript
• web-apis-(visibilitychange