- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
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
Below are interactions with the app:
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
- Implement
TodoApp
component with an input field to create new todos on submit (Enter). Each item should have:
title
- the text of todoid
- unique identifiercompleted
- current status (false
by default)
- Show the number of not completed todos in
TodoApp
- Implement
TodoList
component to display a list of todos ({ id, title, completed })<TodoList items={todos} />
- Implement
TodoItem
component with ability to toggle thecomplete
status. - Add ability to toggle the completed status of all the todos.
- Create
TodosFilter
component to switch betweenall
/active
/completed
todos - Add ability to remove an item.
- Add ability to clear completed items from the list
- (*) Make inline editing for the TODO item
- (*) Save state of the APP to local storage (Required theory)
- (*) Implement saving on outside click
- when editing a TODO
- when creating a TODO