const wrapper = document.querySelector('.todo-list');
const input = document.querySelector('.todo-list__input');
const todoList = document.querySelector('.todo-list__list');
const firstItem = document.querySelector('.todo-item');
const firstItemRemoveButton = firstItem.querySelector('button');

// Let's immediately remember the class of the element that we may need to create and delete
const noTodosItemClassName = 'todo-list__no-todos';

// We'll have to separately describe the logic for the first element on the page
firstItemRemoveButton.onclick = () => removeItem(firstItem);

// task deletion function...
function removeItem(item) {
  item.remove();
  // ...and sometimes we create an element with the text "No tasks" and add it to the page
  if (todoList.children.length === 0) {
    const noTodosItem = document.createElement('div');
    noTodosItem.className = noTodosItemClassName;
    noTodosItem.textContent = 'No tasks';
    todoList.remove();
    wrapper.append(noTodosItem);
  }
}

// describing what to do when Enter is pressed in the input
input.onkeydown = (e) => {
  if (e.key !== 'Enter' || !input.value) return;

  // ...and what to do if there are no tasks in the list
  const noTodosItem = wrapper.getElementsByClassName(noTodosItemClassName);
  if (noTodosItem.length) {
    noTodosItem[0].remove();
    wrapper.append(todoList);
  }

  const newTodo = document.createElement('li');
  newTodo.textContent = input.value + ' ';
  
  const removeButton = document.createElement('button');
  removeButton.textContent = '╳';
  
  // ...and what the "╳" button does for a new task
  removeButton.onclick = () => removeItem(newTodo);
  
  newTodo.append(removeButton);
  todoList.append(newTodo);
  
  // ...and finally, don't forget to clear the data
  input.value = '';
}