Go back
- The code fetches all todos from a mock API using the `getTodos` function.
- It adds a new todo item to the API using the `addTodo` function when the user clicks the add button.
- It updates the status of a todo item in the API using the `updateTodo` function when the user checks or unchecks the checkbox associated with the todo item.
- It deletes a todo item from the API using the `deleteTodo` function when the user clicks the delete button associated with the todo item.
- Upon page load (`DOMContentLoaded` event), it fills the todo list with the fetched todos using the `fillTodoList` function.
- The `createLI` function creates a new list item (li element) for each todo item, including a checkbox for the todo status, text for the todo description, and a delete button.
- This version fetches all todos from the API to determine the ID for the new todo (const todosId = allTodos.length + 1;).
- Advantage: Let us define what id to use when creating new todo. It is based on the current number of todos fetched from the API.
- Consideration: Fetching all todos unnecessarily may impact performance, especially if there are many todos.