FocusFlow is a modern, lightweight productivity dashboard built with HTML, CSS, and Vanilla JavaScript.
It helps students organize study tasks, track deadlines with live countdowns, and monitor completion progress visually — all without a backend.
- 📝 Create tasks with subject, description, and deadline
- ⏳ Live countdown timer for each task
- 📊 Animated circular progress indicator
- 🔄 Real-time completion percentage updates
⚠️ Automatic overdue task highlighting- 💾 Persistent storage using
localStorage - 👤 Editable profile with avatar upload
- 🎯 Built-in productivity break tips
- HTML5
- CSS3 (Custom UI, Gradient Design, Glassmorphism effects)
- Vanilla JavaScript (DOM manipulation + localStorage)
No frameworks. No libraries. Built entirely from scratch.
- Clean SaaS-style dashboard layout
- Blue → Teal gradient background
- Rounded cards with subtle depth shadows
- Responsive layout
- Smooth micro-interactions
FocusFlow/
│
├── index.html
├── style.css
└── script.js
- User sets profile (name + avatar)
- Tasks are created with deadlines
- Countdown timer updates automatically
- Progress circle reflects completed tasks
- All data is stored locally in the browser
- Task categories / priority levels
- Subtasks support
- Dark mode
- Cloud sync
- Pomodoro focus timer
- Improved mobile optimization
