solution 0.01

[StanislavKapytsia]

DEMO LINK

Implement a simple TODO app that functions as described below.

1. Learn the markup in App.tsx.
2. Show only a field to create a new todo if there are no todos yet.
3. Use React Context to manage todos.
4. Each todo should have an id (you can use +new Date()), a title, and a completed status (false by default).
5. Save todos to localStorage using JSON.stringify after each change.
6. Display the number of not completed todos in TodoApp.
7. Implement filtering by status (All/Active/Completed).
8. Add the ability to delete a todo using the x button.
9. Implement the clearCompleted button (disabled if there are no completed todos).
10. Implement individual todo status toggling.
11. Implement the toggleAll checkbox (checked only when all todos are completed).
12. Enable inline editing for the TodoItem:
    • Double-clicking on the todo title shows a text field instead of the title and deleteButton.
    • Form submission saves changes (press Enter to save).
    • Trim the saved text.
    • Delete the todo if the title is empty.
    • Save changes onBlur.
    • Pressing Escape cancels editing (use onKeyUp and check if event.key === 'Escape').

[VitaliyBondarenko1982]

Good job.