Создание формы для создания дела

В функции createTodoItemForm создается сама форма для создания нового дела. Она кажется большой но ее можно разделить на 4-и части, которые я отметил в коде. Поначалу кажется немного непонятно что тут происходит, но далее мы подробно разберем каждую строчку кода.

function createTodoItemForm() {
  /* 1-я часть */
  let form = document.createElement('form');
  let input = document.createElement('input');
  let buttonWrapper = document.createElement('div');
  let button = document.createElement('button');
  /* 2-я часть */
  form.classList.add('input-group', 'mb-3');
  input.classList.add('form-control');
  input.placeholder = 'Введите название нового дела';
  buttonWrapper.classList.add('input-group-append');
  button.classList.add('btn', 'btn-primary');
  button.textContent = 'Добавить дело';
  /* 3-я часть */
  buttonWrapper.append(button);
  form.append(input);
  form.append(buttonWrapper);
  /* 4-я часть */
  return {
    form,
    input,
    button,
  }
}

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

Начнем мы с создания самих элементов. Тут важно понимать что все эти элементы созданы и находятся в "подвешенном" состоянии, т.е. не добавлены на страницу. Мы это сделаем чуть позже.

let form = document.createElement('form');
/* <form></form> */
let input = document.createElement('input');
/* <input> */
let buttonWrapper = document.createElement('div');
/* <div></div> */
let button = document.createElement('button');
/* <button></button> */

Как вы видите код создает 4-е разных элемента. На этом этапе у этих элементов нет никаких атрибутов и классов, но мы их добавим следующим шагом.

2. Добавляем классы и атрибуты

Второй блок кода добавляет классы и атрибуты для созданных элементов в первом блоке. Если вы хорошо знакомы с html и css, то вы сразу поймете что тут происходит. Тут мы не будем рассматривать сами стили добавляемые с помощью этих классов, но вы можете самостоятельно изучить это на сайте самой библиотеки Bootstrap.

form.classList.add('input-group', 'mb-3');
/* <form class="input-group mb-3"></form> */
input.classList.add('form-control');
input.placeholder = 'Введите название нового дела';
/* <input class="form-control" placeholder="Введите название нового дела"> */
buttonWrapper.classList.add('input-group-append');
/* <div class="input-group-append"></div> */
button.classList.add('btn', 'btn-primary');
button.textContent = 'Добавить дело';
/* <button class="btn btn-primary">Добавить дело</button> */

Единственное, что вам может быть не известно, это свойство элемента textContent. Это свойство добавляет сам текст в элемент. То есть элемент будет выглядеть вот так:

<button>Добавить дело</button>

3. Собираем все вместе

С помощью метода append можно вложить один элемент в другой, что и происходит в третьем блоке кода.

buttonWrapper.append(button);
form.append(input);
form.append(buttonWrapper);

В третьем блоке кода мы вкладываем элементы один в другой. То есть код выше превратиться в вот такой html:

<form class="input-group mb-3">
  <input class="form-control" placeholder="Введите название нового дела">
  <div class="input-group-append">
    <button class="btn btn-primary">Добавить дело</button>
  </div>
</form>

4. Возвращаем элементы

Этот код вернет объект который содержит свойства, который в свою очередь содержит элементы которые были созданы первом блоке.

return {
  form, /* <form> */
  input, /* <input> */
  button, /* <button> */
}