todos.js

document.getElementById("todoInput").focus()
const node = document.getElementById("todoInput");
node.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      addTodo()
    }
});
const todos = [
  { done: true, body: 'Go to School'},
  { done: false, body: 'Have some coffee'},
  { done: false, body: 'Write some code'},
]
function renderTodoList(filteredTodos) {
  const todosHTML = filteredTodos.map((todo, idx) => {
    return `
      <li>
        <h3 
          class="${todo.done ? 'done' : '' }" onclick="toggleTodo(${idx})">
            ${todo.body}
        </h3>
          <a href="#" onclick="onDelete(${idx})">x</a>
      </li>
    `
  })
  document.getElementById('todoList').innerHTML = todosHTML.join('')
}
function addTodo() {
  const body = document.getElementById('todoInput').value
  document.getElementById('todoInput').value = ''
  const newTodo = {
    body,
    done: false,
  }
  todos.push(newTodo)
  renderTodoList(todos)
}
function onDelete(idx) {
  todos.splice(idx, 1)
  renderTodoList(todos)
}
function toggleTodo(idx) {
  const newStatus = !todos[idx].done
  todos[idx].done = newStatus
  renderTodoList(todos)
}

function filterForDoneTodos() {
  const doneTodos = todos.filter((el) => el.done )
  renderTodoList(doneTodos)
}
function filterForAllTodos() {
  renderTodoList(todos)
}
function filterForNotDoneTodos() {
  const notDoneTodos = todos.filter((el) => !el.done )
  renderTodoList(notDoneTodos)
}
renderTodoList(todos)