The app provides a full task management experience with all the basic functionalities for a Todo app. Users can organize their tasks by projects, rename them, add as many new ones, or delete projects. Inside a project, there are many options for a user to manipulate tasks, including adding new ones, deleting them, handling titles, descriptions, due dates and priorities. Every change made by a user is stored in the local storage, enabling the maintenance of tasks across sessions. The project is a part of The Odin Project's curriculum. The Odin Project provides a high quality web development education maintained by an open source community.
- Task Management Flexibility: Empower users with comprehensive task management capabilities, allowing them to tailor their Todo app experience to their unique needs. Users can perform a range of actions, including marking tasks as done, updating task details such as due date, description, title, and priority, as well as managing projects by adding new ones or removing existing ones.
- Local Storage: The app stores every change made by a user in the local storage, therefore, after closing a tab or even the browser, changes made by a user will be saved. This functionality ensures that every modification or addition made by the user, such as creating projects, adding or deleting tasks, updating task details, and marking tasks as complete, is automatically saved to the local storage. This allows users to maintain their task list across sessions.
- Responsive Design: The app provides a consistent user experience and a user-friendly interface across various desktop screen sizes. It supports window resizing down to a certain point, but at the moment a mobile phone layout is not available.
To Do:
- Mobile Phone Layout
- Drag and Reorder
The project is built with:
- HTML
- Vanilla JavaScript
- Vanilla CSS
Tools
- Visual Studio Code
- Git
- Webpack
This section mentions the main topics covered during project work and prior lessons
- OOP
- SOLID Principles
- Local Storage
- Contenteditable Attribute
- Modules
- Webpack
The project was great fun, and I am satisfied with the final outcome. In the lesson prior to the project, we covered SOLID principles, and in previous lessons, there was a significant focus on the structure and organization of the code. I tried to code having these principles in my mind, but as in prior lessons, my focus was on the Single Responsibility principle, and I believe the code aligns well with it. Implementing local storage was also very exciting, and I am looking forward to implementing other, more advanced forms of storage in the future.
- Sticker used in the header is one of the To do list icons created by Paul J. - Flaticon
- Sticker used for the favicon image is one of the Correct icons created by Elite Art - Flaticon