4IT580: Docs
4IT580 WebGitLab

2nd Homework

The goal of this homework is to add new features in the to-do list.

There are 4 steps:

Deadline: Monday 02/10/2023 - 23:59:59

Step 0: Connect to the Server

To get the latest state of Quacker in your folder, open your terminal and run the following commands on the server:

This will fetch the newly created branch from the GitLab origin and reset your code to the final state of the 2nd practical class.

If you have trouble connecting, see "Hello, Server!" guide or contact your teacher.

Step 1: Design TodoList and TodoListItems components

Create components using design on screenshot below (be as close as possible). Use Chakra UI, for more info see here.

Usefull Chakra UI components:

Step 2: Add a 'Delete Item' Feature

Implement a feature that will delete a specific to-do list item by clicking a button next to the item name.

  1. Add a button for deleting an item
  2. Create a action in hook
    • Use to delete an item from an array in the state
    • Expose the function by adding it in the return value of
  3. When the user clicks the delete button, call the function with the necessary arguments

Step 3: Add Tabs for All / Completed / Not completed Items

  1. Add a new property in state to track the current tab
  2. Create a function in
  3. Connect and with the using props
  4. Return the correctly filtered based on the active
    • Use to filter the items accordingly
  5. Use Tabs components from Chakra UI (see example below)

Send a Link to a Working To-do List

Once you are finished:

Deadline: Monday 02/10/2023 - 23:59:59

Happy Coding!