4IT580: Docs
4IT580 WebGithub

2nd Homework

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

There are 4 steps:

Deadline: Monday 3/10/2022 - 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 practical-02-end from the GitHub 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 deleteItem action in useTodoList hook
    • Use array.filter() to delete an item from an array in the state
    • Expose the function by adding it in the return value of useTodoList
  3. When the user clicks the delete button, call the deleteItem function with the necessary arguments

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

  1. Add a new property filter in useTodoList state to track the current tab
  2. Create a setFilter function in useTodoList
  3. Connect filter and setFilter with the Tabs using props
  4. Return the correctly filtered items based on the active filter
    • Use array.filter() 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 3/10/2022 - 23:59:59

Happy Coding!