Completion

Learn to mark a task as completed.

The completeTodo function

completeTodo finds a task by id and sets its status to "completed". The task is not removed from the list; only its state changes. We find the task with find and check its existence with if.

function completeTodo(todos: Todo[], id: string): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.status = "completed";
  }
}

Toggle to reverse

To reverse a task's state you can write toggleTodo. If the task is "active" it becomes "completed"; if "completed" it becomes "active". This is useful for reopening a task.

function toggleTodo(todo: Todo): void {
  if (todo.status === "active") {
    todo.status = "completed";
  } else {
    todo.status = "active";
  }
}

Exercise Write the completeTodo function

Define Status and Todo. Write addTodo and listTodos functions. Write a function completeTodo(todos: Todo[], id: string): void: find the task with find, and if it exists set its status to "completed". Add a "Süt al" task, complete it with id "1", and list them.

Show example solution

type Status = "active" | "completed";
interface Todo { id: string; title: string; status: Status; }

function addTodo(todos: Todo[], title: string): Todo[] {
  const todo: Todo = { id: String(todos.length + 1), title, status: "active" };
  todos.push(todo);
  return todos;
}

function completeTodo(todos: Todo[], id: string): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.status = "completed";
  }
}

function listTodos(todos: Todo[]): void {
  todos.forEach(t => console.log(t.id + ": " + t.title + " [" + t.status + "]"));
}

const todos: Todo[] = [];
addTodo(todos, "Süt al");
completeTodo(todos, "1");
listTodos(todos);

Test yourself

What is done to the status field to complete a task?
- Deleted
- Set to "completed"
- title is changed
- Set to "active"
Show answer

Set to "completed" — Completing a task means setting its status field to "completed". The task is not deleted; the title is not changed.

Complete the find condition

const todo = todos.find(t => t.id === ____);

Show answer

const todo = todos.find(t => t.id === id);

Completion parts

completeTodo

Complete a task
todos.find(...)

Find by id
todo.status = "completed"

Update status
toggleTodo

Toggle status

Next lesson: Filtering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies