A clean, minimal task management app built to help you organize your day with clarity and focus.
![ZenFocus Preview]!
(
)
ZenFocus is a lightweight to-do application with a focus on calm, distraction-free productivity. Built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies — just clean fundamentals.
Tasks persist across sessions using localStorage, so your list is always waiting for you when you come back.
- Add tasks with an optional due date
- Check off tasks to mark them complete
- Animated progress bar showing real-time completion percentage
- Archive section — completed tasks are separated cleanly from active ones, collapsible on demand
- Clear completed button to bulk-remove finished tasks
- Persistent storage via localStorage — your tasks survive page refreshes
- Keyboard support — press Enter to add a task instantly
- Responsive layout — works cleanly on any screen size
| Technology | Purpose |
|---|---|
| HTML5 | Structure and markup |
| CSS3 | Styling, animations, shimmer effect |
| JavaScript (ES6+) | App logic, DOM manipulation, localStorage |
| Google Fonts | DM Serif Display + DM Sans typography |
This project was built as part of my JavaScript fundamentals practice. Key concepts applied:
- DOM manipulation and dynamic HTML rendering
- Working with arrays of objects and array methods (
.filter(),.forEach(),.splice()) - JSON serialization with
localStoragefor data persistence - CSS animations and transitions (progress bar shimmer, smooth width transitions)
- Separation of concerns — keeping data logic clean and separate from render logic
No installation required. Just open it in a browser.
git clone https://github.com/Kishik-K/ZenFocus
cd ZenFocus
open index.htmlOr view it live → https://kishik-k.github.io/ZenFocus/
ZenFocus/
├── index.html # App structure and markup
├── styles.css # All styling and animations
└── script.js # App logic and localStorage handling
- Drag to reorder tasks
- Priority levels (low / medium / high)
- Rebuild in React as part of learning progression
Kishik — GitHub
Part of an ongoing series of projects built while learning full stack web development.