-A single page web application built using HTML, CSS, JS and Webpack.

Objectives :

• Only work with tasks for now.
• Remove task.
• Add task.
• when modal shows up, background is blurred.
• Add options to add date for user in the add task bar.
• Display task's priority.
• Edit task.
• View all tasks.
• View planned tasks.
• View today's tasks.
• todo-items now have IDs.
• Allow duplicate tasks.

More feature when we add custom projects :

• Add new project to project list on the sidebar.
• Projects have unique IDs.
• Create functions to create html non-image elements and images.
• Edit the project name by clicking on the edit symbol.
• Delete project by clicking on the delete symbol.
• Refactor code. Make functions to delete and edit projects.
• Log some text when click on a project item.
• Create a project pointer that keeps track of the currently selected project.
• When a project is selected, its background color changed to darker gray.
• Log the project info after it gets clicked on.
• Display project's name in main content div.
• Show error message when user does not enter project name(duplicate project names are allowed)
• when the currently selected project is deleted, its name in main content div should also be deleted.
• View to-do items of a project by clicking on this project.
• Add a div where user can enter name of new item.
• Add todo items to currently selected project.
• Create a class that manages the interactions between to-do items and projects.
• Move all the logic about managing todo-items and projects into this class.
• By default, the task link is selected and all to-do items are displayed.
• if user does not select a project before adding items, newly created items are only added to 'tasks'. Otherwise, the new to-do item are also added to selected project.
• When a project is deleted, all of its to-do items will also be deleted.
• User can remove project and items.
• Now user can choose to move any to-do item to the currently available projects.

Features when we add local storage :

• Create a local storage.
• Implement add operation. if task belongs to a project, in the local storage, it will have reference to the project ID.
• initially, we have a key called "tasks" in localStorage.
• initially, we have a key called "projects" in localStorage.
• Crud operations for tasks and projects.

Functionalities:

User can create and manage their own tasks. They can also make their own to-do list more organized by creating projects that hold similar tasks.

Technologies:

Webpack, HTML, CSS, Javascript, LocalStorage.

Notes:

This app UI design was heavily insipired by the Microsoft To-do UI.