Событие формы submit

После нажатия на кнопку формы происходит событие submit которое мы используем для того чтобы добавить дело.

todoItemForm.form.addEventListener('submit', function(e) {
  /* 1-я часть */
  e.preventDefault()
  /* 2-я часть */
  if (!todoItemForm.input.value) {
    return;
  }
  /* 3-я часть */
  let todoItem = createTodoItem(todoItemForm.input.value);

  /* 4-я часть */
  todoItem.doneButton.addEventListener('click', function() {
    console.log('doneButton');
    todoItem.item.classList.toggle('list-group-item-success');
  });

  todoItem.deleteButton.addEventListener('click', function() {
    if (confirm('Вы уверены')) {
      todoItem.item.remove();
    }
  });

  /* 5-я часть */
  todoList.append(todoItem.item);

  todoItemForm.input.value = '';
})

1. preventDefault

Вызов метода preventDefault останавливает действия браузера по умолчанию. В данном случае перезагрузки страницы после нажатия на кнопку в форме не произойдет.

2. Проверка если поле ввода пустое

Помните мы в функции createTodoItemForm вернули не один элемент, а целых три? Скоро они нам пригодятся.

return {
  form,
  input,
  button,
}

Теперь после вызова функции createTodoItemForm, нам доступен элемент <input> т.е. поле ввода для текста.

let todoItemForm = createTodoItemForm();

Сам текст из поля ввода мы можем получить с помощью свойства value. И проверить если в поле ввода ничего нет, то и ничего не делать.

if (!todoItemForm.input.value) {
  return;
}

Этот небольшой код, возможно кажется вам сложным, поэтому давайте его упростим. Обе версии проверяют если в поле ввода пустая строка, но последняя гораздо проще для понимания.

if (todoItemForm.input.value === '') {
  return;
}

return возвращает какое-либо значение из функции и поле него код не выполняется. Здесь ничего не возвращается, подобный прием очень часто используется, чтобы остановить выполнение следующего кода. Для понимания этого кода, можете закомментировать return и у вас появится возможность создавать дела без названия.

Получить значение поля ввода мы можем с помощию свойства value

3. Создание элементов

Давайте представим что вы открыли страницу и в поле ввода ввели следующий текст "приготовить ужин". Давайте посмотрим как будет работать с этим значением код функции-обработчика события submit.

let todoItem = createTodoItem(todoItemForm.input.value);

В переменной todoItem будет содержаться следующий html.

<li class="list-group-item d-flex justify-content-between align-items-center">
  приготовить ужин
  <div class="btn-group btn-group-sm">
    <button class="btn btn-success">Готово</button>
    <button class="btn btn-danger">Удалить</button>
  </div>
</li>

Несмотря на то, что эти элементы не добавлены на страницу, с ними уже можно работать.

4. Добавляем клики по кнопкам дела

С помощью метода addEventListener, мы добавляем функции обработчики события click, т.е. по клику на кнопку "Готово" элементу <li> из переменной todoItem.item будет добавлен новый класс list-group-item-success. Данный класс добавит стили элементу <li>. В частности добавит зеленый цвет фона.

todoItem.doneButton.addEventListener('click', function() {
  todoItem.item.classList.toggle('list-group-item-success');
  /* <li class="... list-group-item-success"> </li>*/
});

Само добавление класса происходит с методом toggle, который добавит класс, только если этого класса нет у этого жлемента. Если же этот класс присутствует, то он его наоборот удалит.

Для кнопки "Удалить" здесь добавляется окно подтверждения. Если ответ "ОК", то элемент удалиться с помощью метода remove.

todoItem.deleteButton.addEventListener('click', function() {
  if (confirm('Вы уверены')) {
    todoItem.item.remove();
  }
});

5. Добавляем дело на страницу

Последнее что мы делаем это добавляем созданный нами элемент со всеми атрибутами, классами и функциями-обработчиками а саму страницу с помощью метода append.

todoList.append(todoItem.item);

Чтобы очистить поле ввода мы присваиваем свойству элемента value пустое значение.

todoItemForm.input.value = '';