A powerful, feature-rich todo list application built with vanilla JavaScript, HTML, and CSS.
SnapList is an enhanced todo list application that goes beyond basic task management. It features dual lists (To-Do and Shopping), priority levels, due dates, categories, tags, task steps, advanced sorting, and export/import functionality - all in a clean, responsive interface with dark/light theme support.
- Dual Lists: Separate To-Do and Shopping lists
- Task Management: Add, edit, complete, and delete tasks
- Local Storage: All data saved in your browser
- Responsive Design: Works on mobile, tablet, and desktop
- Priority System: High, Medium, and Low priority levels with visual indicators
- Due Dates: Set due dates with overdue tracking and visual status indicators
- Categories & Tags: Organize tasks with customizable categories and searchable tags
- Task Steps: Break down complex tasks into manageable steps
- Advanced Sorting: Sort by date, due date, priority, status, or alphabetically
- Search & Filter: Quickly find tasks by text, category, or tags
- Export/Import: Backup and restore your data in JSON or CSV format
- Dark/Light Theme: Toggle between color schemes based on your preference
- Clean Interface: Modern, uncluttered design focused on usability
- Visual Feedback: Clear indicators for all task states and actions
- Progress Tracking: Visual progress indicators for multi-step tasks
- Clone or download this repository
- Open
index.htmlin your browser, or - Serve the directory with any local server:
python -m http.server 8000
- Navigate to
http://localhost:8000in your browser
SnapList runs entirely in your browser with no external dependencies. All data is stored locally in your browser's localStorage.
- Select the appropriate tab (To-Do or Shopping)
- Enter task text in the input field
- Set priority level (optional)
- Set due date (optional)
- Select category (optional)
- Add tags (optional)
- Click "Add" or press Enter
- Complete: Click the checkbox next to any task
- Edit: Click directly on task text to edit
- Delete: Hover over task and click the delete button
- Add Steps: Use the "Add a step..." input below any task
- Manage Steps: Check off steps as you complete them
- Categories: Create categories in the Categories section and assign them to tasks
- Tags: Add comma-separated tags when creating tasks
- Filtering: Use the filter controls to show only tasks from specific categories or with specific tags
- Choose a sorting option from the dropdown (Date, Due Date, Priority, Status, Alphabetical)
- Toggle between ascending and descending order
- Sorting preferences are saved automatically
- Export: Save your data as JSON (complete backup) or CSV (simple export)
- Import: Restore data from previously exported files
- Files are automatically named with the current date
- Vanilla JavaScript: No frameworks or external libraries
- localStorage: Client-side data persistence
- Responsive CSS: Mobile-first design approach
- Modular Code: Well-organized, maintainable structure
Each task contains:
- Text content
- Creation date and time
- Completion status
- Priority level
- Due date (optional)
- Category (optional)
- Tags (optional)
- Steps (optional)
Works in all modern browsers (Chrome, Firefox, Safari, Edge) that support localStorage and modern JavaScript features.
index.html: Main application structurestyle.css: All styling and responsive designscript.js: Complete application logic- Documentation files for features and development
This project was developed with a phased approach, implementing one feature at a time with thorough testing. See DEVELOPMENT_TASKS.md for the complete development history.
As this is a standalone application, contributions are not actively sought. However, you're welcome to fork the project and make your own enhancements.
This project is open source and available under the MIT License.
Developed as an enhanced todo list application with modern features and a focus on usability.