This react To-Do-App allows add task, delete task, completion marking, validate input, filter task option and optional sorting and localStorage integration.
In the above figure Add Task button is disabled until the user enter the valid input task. Once the user input the task Add Task button is enabled and the button colour is changed from grey to blue.
It also validates the input as the character enterd is less than 5 then it generates the error or alert shown in below figure. After adding the task, mark as done and delete task button is enabled so that we can mark as done or remove once the task is completed or deleted respectively.
The task can be filterd on the basis of completed task and active task. The task is filtered on the basis of choice choosen. There are three choices:
- All
- By default, All task is shown which is completed and active.
- Active
- After clicking the Active filter option, it display all the active tasks in the list task section.
- Completed
- On clicking the Completed filter option, it display all the completed task in the list task section.
Sorting of task is performed in two ways:
- Complete First
- This feature sorts the task which is completed first and after that the uncompleted one.
- Not Completed First
- This feature sorts the task first which is not completed or currently active and after that the completed one.
The bin icon besides the each task delete the task from our task section once clicked. It will delete the particular task from the To-Do List App
