vitaliikorol / react_todo-app

React ToDo App

• Replace <your_account> with your Github username in the DEMO LINK
• Follow the React task guideline

Description

Implement simple TODO app

Requirements:

• when app loads, user sees an input to enter their TODOs
• when user types some TODO and hits enter, it's added to the list below (see the gif)
• TODO has two states: Active and Completed
• user can filter between All, Active, and Completed TODOs
• You can implement your own style or take them from the original sources
  • base.css
  • index.css

Below are interactions with the app:

Screenshot:

Resources:

• Font: 'helvetica neue'
• Font sizes to use: 100px, 24px, 14px
• implement arrow by rotating '❯' symbol
• Use '✕' symbol to remove TODO item on hover
• checked
• unchecked

Tasks

1. Implement TodoApp component with an input field to create new todos on submit (Enter). Each item should have:

• title - the text of todo
• id - unique identifier
• completed - current status (false by default)

1. Show the number of not completed todos in TodoApp
2. Implement TodoList component to display a list of todos ({ id, title, completed })

   <TodoList items={todos} />

3. Implement TodoItem component with ability to toggle the complete status.
4. Add ability to toggle the completed status of all the todos.
5. Create TodosFilter component to switch between all/active/completed todos
6. Add ability to remove an item.
7. Add ability to clear completed items from the list
8. (*) Make inline editing for the TODO item
   • double click on the TODO item text makes it editable
   • Enter saves changes
   • Ecs cancels editing
9. (*) Save state of the APP to local storage (Required theory)
10. (*) Implement saving an edited todo when you click outside of the input