You'll be making a todo app using React and Redux. Redux will store your todos and React will visualize them.
Making a todo application is generally considered an important early rite of passage for understanding any state management library.
Users should be able to:
- Create a Todo
- Toggle a Todo between completed and uncompleted by clicking on it
- Completed todos should be shown with
line-throughtext
- Completed todos should be shown with
A Todo object should have the following properties:
{
completed: true
id: 1,
text: "Buy groceries",
}
Your Redux state to store this information would look like:
{
nextTodoId: 1,
todos: [],
}
Add three buttons that set a filter for which todos are visible:
"all"
: show all todos"active"
: show todos that are active, not completed"completed"
: show todos that are completed, not active
Store this setting as a visibilityFilter
member in your Redux state.
Its default/initial value should be "all"
.
- Fork this repo
- Clone the forked repository
cd
to the directory where you cloned itnpm install
to install dependenciesnpm run cypress
to open the cypress testing windownpm test
to run jest / node tests
Note: Remember to
git add
,git commit
andgit push
regularly
- When finished, commit and push your work.
- Make a pull request on github.
- Submit the link to your pull request on Canvas.