Your personal productivity assistant — minimalist, fast, and entirely browser-based.
Live Demo: task-manager-eight-wheat-77.vercel.app
Task Manager – A minimalist, feature-rich task management application built with vanilla HTML, CSS, and JavaScript.
Task Manager is a lightweight, browser-based productivity tool for users who want simplicity without sacrificing functionality. It runs entirely in your browser with zero server dependencies — all tasks are stored locally via localStorage, ensuring complete privacy and persistence across sessions.
No sign-ups. No installs. No noise. Just focus.
Core Functionality
- ✅ Add Tasks – Create new tasks with a single click or keyboard shortcut.
- 🔴🟡🟢 Priority Levels – Assign High, Medium, or Low priority to any task.
- ☑️ Task Completion – Mark tasks as done with clear visual feedback.
- 🗑️ Delete Tasks – Remove individual tasks with a smooth animation.
- 🧹 Clear All – Bulk delete all tasks with a confirmation prompt.
Data & Storage
- 💾 Persistent Storage – Tasks saved automatically to
localStorage. - 🔒 Privacy-First – All data stays local; nothing is sent to a server.
- ♻️ Data Longevity – Tasks persist until manually deleted or browser data cleared.
User Experience
- 🎨 Modern Design – Clean, minimalist interface inspired by the Matter app.
- 📱 Fully Responsive – Works seamlessly on desktop, tablet, and mobile.
- ⚡ Fast & Lightweight – No dependencies, instant load times.
- 🎯 Task Counter – Real-time count of remaining tasks.
- 📖 Built-in Documentation – Collapsible help section with usage guide.
Accessibility
- ♿ Keyboard Navigation – Full keyboard support for all interactions.
- 🎤 Screen Reader Support – ARIA labels and semantic HTML throughout.
- 🖱️ Mouse & Touch Friendly – Optimized for all input methods.
| Category | Technology |
|---|---|
| Markup | HTML5 (semantic) |
| Styling | CSS3 – Flexbox & CSS Grid |
| Logic | Vanilla JavaScript (ES6+) |
| Storage | Browser localStorage API |
| Fonts | Google Fonts (DM Mono) |
| Icons | Unicode Emoji |
| Deployment | Vercel |
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- No Node.js, npm, or any installation required!
-
Clone the repository
git clone https://github.com/neelpatel6262/task-manager.git cd task-manager -
Open the project
# Option 1: Open directly in browser open index.html # Option 2: Use a local server (recommended) python -m http.server 8000 # Visit http://localhost:8000
-
Deploy to Vercel (optional)
npm install -g vercel vercel
- Type a task in the input field.
- Select a priority level (High / Medium / Low).
- Click Add Task or press
Enter. - Tasks are saved automatically — no manual save needed.
- Mark tasks complete by clicking the checkbox.
- Delete individual tasks or use Clear All to reset.
- Collapse/expand the built-in help section for a quick usage guide.
| Shortcut | Action |
|---|---|
Enter |
Add task (when input is focused) |
Ctrl+Enter / Cmd+Enter |
Focus input / add task from anywhere |
Escape |
Clear input field and unfocus |
Space or Enter on checkbox |
Toggle task completion |
task-manager/
├── index.html # Main HTML file with UI structure
├── style.css # Styling and responsive design
├── script.js # Core JavaScript functionality
├── Assets/ # Images and icons
│ └── circle-check-big.svg
└── README.md # Project documentation
- Phase 1 – Planning & Design: Analyzed existing task managers (inspired by Matter app). Defined core features: add, complete, delete, and priority system. Designed a minimalist UI with planned
localStoragesupport. - Phase 2 – Core Development: Built semantic HTML structure, implemented JavaScript task management logic, and developed CSS styling with modern design patterns including responsive layouts.
- Phase 3 – Feature Enhancement: Integrated the priority system with visual indicators, added keyboard shortcuts for power users, and built the collapsible documentation section.
- Phase 4 – Testing & Optimization: Cross-browser testing (Chrome, Firefox, Safari, Edge), mobile responsiveness testing, performance optimization, and accessibility audit (ARIA labels, keyboard navigation).
- Phase 5 – Deployment: Configured Vercel deployment, set up GitHub repository, and implemented a CI/CD pipeline for automatic deployments from GitHub.
Technical Skills
- DOM Manipulation – Advanced element creation, event handling, and dynamic updates.
- LocalStorage API – Data persistence, JSON serialization, and error handling.
- CSS Animations – Smooth transitions, keyframe animations, and visual feedback.
- Responsive Design – Mobile-first approach, media queries, and flexible layouts.
- Accessibility Standards – ARIA roles, semantic HTML, and keyboard navigation.
- Git & GitHub – Version control, merge conflict resolution, and collaboration workflows.
- Vercel Deployment – Continuous integration and automatic deployments from GitHub.
Design Principles
- Minimalism: remove unnecessary UI elements and let content breathe.
- Providing clear visual feedback for every user action.
- Designing mobile-first, then progressively enhancing for larger screens.
Problem-Solving
- Debugging
localStoragepersistence edge cases. - Resolving CSS layout conflicts with Flexbox.
- Implementing smooth animations without performance degradation.
- Managing application state without a framework.
| Aspect | Before | After |
|---|---|---|
| Data Persistence | None | Automatic localStorage |
| Mobile Experience | Basic | Fully responsive |
| Accessibility | Limited | WCAG compliant |
| Keyboard Support | Enter key only | Full keyboard shortcuts |
| Documentation | None | Built-in collapsible help |
| Deployment | Local only | Live on Vercel |
| Code Quality | Inline styles | Separated HTML / CSS / JS |
From a simple add/delete list → to a full-featured, accessible, deployed productivity app.
- 📅 Due Dates & Reminders – Set deadlines for tasks.
- 🏷️ Categories & Tags – Organize tasks by project or area.
- 🔍 Search & Filter – Find tasks quickly by keyword.
- 📊 Analytics – View productivity stats and trends.
- ☁️ Cloud Sync – Optional cross-device sync via a backend.
- 🌙 Dark Mode – Easy on the eyes for night use.
- 🔔 Push Notifications – Reminders for important tasks.
- 📱 Mobile App – Native iOS/Android wrapper.
- Tasks are only available on the same browser and device — no cross-device sync.
- No built-in export or backup functionality.
- Clearing browser cache will permanently delete all tasks.
- Maximum task length is 100 characters (by design).
Contributions are welcome!
-
Fork the repository.
-
Create a feature branch:
git checkout -b feature/your-feature-name
-
Commit your changes and push:
git commit -m "Add: your feature description" git push origin feature/your-feature-name -
Open a Pull Request describing your changes.
You can also report bugs or suggest features by opening an issue.
This project is open source and available under the MIT License. Free to use for personal or commercial projects.
- Name: Neel Patel
- GitHub: @neelpatel6262
- Live Demo: task-manager-eight-wheat-77.vercel.app
- Inspired by the Matter task management app philosophy.
- Built with vanilla web technologies for maximum compatibility and zero overhead.
- Designed with accessibility and user experience as first-class priorities.
| Field | Info |
|---|---|
| Project Status | Active / Portfolio-ready |
| Version | 1.0.0 |
| Deployment | Vercel |
- HTML5 semantic structure
- CSS3 responsive layout (Flexbox + Grid)
- Vanilla JS task logic (add, complete, delete)
- Priority levels with visual indicators
-
localStoragepersistence - Keyboard shortcuts
- Built-in collapsible help / documentation
- Accessibility (ARIA labels, keyboard nav)
- Cross-browser testing
- Deployed to Vercel
- Due dates & reminders
- Search & filter
- Dark mode
- Cloud sync / backend integration