Code Monkey home page Code Monkey logo

react_dynamic-list-of-todos's Introduction

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;
  • to try the working page and implement the same behaviour;

Here is the working page

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 when the App is loaded and show them using TodoList (check the code in the api.ts);
  2. Show the Loader when waiting any data from the server (check the components folder);
  3. Check how the wait function is used in the api.ts to ensure that Loader works as expected;
  4. When the Show button is clicked open the TodoModal with a selected todo;
  5. Don't forget to load user details (replace 1 with the actual userId);
  6. Show the Loader while waiting for the user;
  7. x button should close the modal;
  8. The select should filter todos by the completed status: all, completed and active(not completed) todos;
  9. 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;

Instructions

  • Install Prettier Extention and use this VSCode settings to enable format on save.
  • Implement a solution following the React task guideline.
  • Use the React TypeScript cheat sheet.
  • 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 and add it to the PR description.

react_dynamic-list-of-todos's People

Contributors

danheim avatar danmysak avatar irenhh avatar marina-tilniak avatar mgrinko avatar mykhalenych avatar mykola-yarchuk avatar olexandr6 avatar vpolets avatar yevhs avatar yuriiholiuk avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react_dynamic-list-of-todos's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.