By requesting https://jsonplaceholder.typicode.com/todos and https://jsonplaceholder.typicode.com/users, create and display a list of TODO items with an option of removing individual items.
Create and use five components:
TodoList
(for the whole list),TodoListHandler
(Redux container forTodoList
that manages its props, including callbacks if any),TodoItem
(for a single TODO item),TodoItemHandler
(Redux container forTodoItem
that manages its props, including callbacks if any),User
(for displaying information about a user).
TodoList
should display a list of TodoItem
s (through TodoItemHandler
); each TodoItem
must display the basic info about an item as well as the User
the item belongs to. You can choose yourself what exact information you want to present and how, but you need to show at least the title of the item, the name of the user and whether the item is completed. Alongside each TODO item there should also be a button that removes the item when clicked.
Initially TodoList
has to present the user with a button labeled "Load". When the user hits the button, the script starts to download the data; the label of the button has to change to "Loading..." and the button must become disabled. Once the data has been loaded, hide the button altogether and display the TODO items instead.
Additionally, you should provide a capability of sorting the items either by title, user, or the item’s status (whether the item is completed or not).
- 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
- Run
npm run start
to starthttp-server
onhttp://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
- When you finished
Deploy on gh-pages
- Build the project
$ npm run build
- Commit and push all recent changes
$ git add . $ git commit -m 'commit message' $ git push origin master
- Execute
npm run deploy
. This command will push the/build
folder to branchgh-pages
in your remote repository. - 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 again.
- Create
Pull Request
from forked repo(<branch_name>)
to original repo (master
). - Add a link at
PR
to Google Spreadsheets.
src/
- directory for css, js, image, fonts filesbuild/
- directory for built pages
You should be writing code in src/
directory.
Add link here: [DEMO LINK](https://<your_account>.github.io/<repo_name>/)