A beautifully designed, pure Vanilla JS Lofi Pomodoro Productivity suite built for absolute focus and flow. Zero build-steps. 100% portable.
This single-page application combines a Lofi music player, a Pomodoro timer, and an advanced Task Management panel into one cohesive, deployable workspace.
Inspired by premium applications, it uses glassmorphism, modern gradients, and CSS variables, meaning there are no heavy Node modules required. It is effortlessly deployable anywhere.
- 🎧 Music Player: Deep integration with the YouTube
IFrame API, streaming live 24/7 Lofi endpoints (e.g., Lofi Girl) seamlessly in the background without exposing YouTube UI controls. - ⏱️ Pomodoro Timer: 25-minute default countdown built with JavaScript intervals, featuring Start/Pause/Reset flows and audible feedback loops.
- 📝 Task Panel: Custom logic wrapping
Sortable.jsallows for dragging, adding, completing, and clearing tasks, instantly persisting across sessions via LocalStorage.
Every single bonus challenge has been rigorously developed into the application.
| Feature | Points | Implementation Notes |
|---|---|---|
| Ambient Theme Switching | +15 |
Fully separates CSS styling & layered environmental audio (Rain vs City Traffic) using independent volume sliders. |
| Animated SVG Timer Ring | +15 |
Custom SVG circle manipulates stroke-dashoffset mathematically alongside the clock to animate a smooth regression ring. |
| Motivational Quotes | +25 |
Hydrates the UI via async calls to dummyjson.com/quotes/random rotating every 10 minutes recursively. |
| Drag-to-Reorder Tasks | +20 |
Integrated native JS drag properties; arrays update and serialize immediately to localStorage ['tasks']. |
| Focus Session History | +25 |
A timestamped history log persists upon Pomodoro completion, viewable in a beautiful collapsible UI folder. |
| Custom Timer Presets | +10 |
Users can input dynamic custom minutes and save them as permanent <button> chips. |
| Keyboard Shortcut System | +10 |
Event hooks listen to Spacebar (Music), S (Timer), N (Add Task), and C (Clear Tasks) when outside input fields. |
This repository ships with an impressive custom Vanilla JS E2E Test Runner, built directly into test.html. Since the project avoids Node.js and testing frameworks like Cypress, we built our own asserting browser engine!
- Start your local server (
npx serveorpython -m http.server). - Navigate to
http://localhost:8000/test.html. - Watch the automated test agent hydrate the iframe and physically execute 8 automated validation checks proving the exact score above!
Because the application is built strictly utilizing standard bleeding-edge web technologies (HTML, CSS, ES6 JS Modules), no build step is necessary.
- Clone or download this repository.
- Because of YouTube IFrame API CORS limitations, please serve the
index.htmlfile using any standard local HTTP server (such as Live Server plugin in VSCode).
Run instantly using Python:
python -m http.server 8000Then visit http://localhost:8000.
Built with absolute focus. Ready for Vercel.