amserhii11/react_todo-app

React ToDo App

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/comleted 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 makes it editable)
9. (*) Save state of the APP to local storage

Workflow

• Fork the repository with task
• Clone forked repository

  git clone git@github.com:<user_name>/<task_repository>.git

• Run npm install to install dependencies.
• Then develop

Development mode

• Run npm start to start development server on http://localhost:3000 When you run server the command line window will no longer be available for writing commands until you stop server (ctrl + c). All other commands you need to run in new command line window.
• Follow HTML, CSS styleguide
• Follow the simplified JS styleguide
• run npm run lint to check code style
• When you finished add correct homepage to package.json and run npm run deploy
• Add links to your demo in readme.md.
  • [DEMO LINK](https://<your_account>.github.io/<repo_name>/) - this will be a link to your index.html
• Commit and push all recent changes.
• Create Pull Request from forked repo (<branch_name>) to original repo (master).
• Add a link at PR to Google Spreadsheets.

Project structure

• src/ - directory for css, js, image, fonts files
• build/ - directory for built pages

You should be writing code in src/ directory.