Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

didnt know tests failed #2565

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

didnt know tests failed #2565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
57d19f7
didnt know tests failed
vanvalera Sep 17, 2024
de577db
fixes
vanvalera Sep 17, 2024
dc0cac5
tests done
vanvalera Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# React dynamic list of TODOs

The goal of this task is to teach you:

- how to work with a not detailed task description;
- to learn the existing code before you start;
- to understand tests and why they fail;
Expand All @@ -12,7 +13,7 @@ You are given the markup for the `App`, `TodosList`, `TodoFilter`, `TodoModal`
and `Loader` components. Load data from the API and show it using the given components.

1. Load [the todos](https://mate-academy.github.io/react_dynamic-list-of-todos/api/todos.json) when the `App` is
loaded and show them using `TodoList` (check the code in the `api.ts`);
loaded and show them using `TodoList` (check the code in the `api.ts`);
1. Show the `Loader` when waiting any data from the server (check the `components` folder);
1. Check how the `wait` function is used in the `api.ts` to ensure that `Loader` works as expected;
1. When the `Show` button is clicked open the `TodoModal` with a selected `todo`;
Expand All @@ -21,12 +22,13 @@ loaded and show them using `TodoList` (check the code in the `api.ts`);
1. `x` button should close the modal;
1. The `select` should filter todos by the `completed` status: `all`, `completed` and `active`(not completed) todos;
1. Use the `input` in the `TodoFilter` to filter the `todos` by `title`;
- show the `x` button when the `query` is entered;
- the `x` button should clear the `query` and reset the todos;
- show the `x` button when the `query` is entered;
- the `x` button should clear the `query` and reset the todos;

## Instructions

- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
- Open one more terminal and run tests with `npm test` to ensure your solution is correct.
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_dynamic-list-of-todos/) and add it to the PR description.
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://vanvalera.github.io/react_dynamic-list-of-todos/) and add it to the PR description.
Loading
Loading