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

Само дело на страницу добавляется с помощью функции createTodoItem. Ее можно разделить на условные 3-и части.

function createTodoItem(name) {
  /* 1-я часть */
  let item = document.createElement('li');
  let buttonGroup = document.createElement('div');
  let doneButton = document.createElement('button');
  let deleteButton = document.createElement('button');

  /* 2-я часть */
  item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
  item.textContent = name;

  buttonGroup.classList.add('btn-group', 'btn-group-sm');
  doneButton.classList.add('btn', 'btn-success');
  doneButton.textContent = 'Готово';
  deleteButton.classList.add('btn', 'btn-danger');
  deleteButton.textContent = 'Удалить';

  /* 3-я часть */
  buttonGroup.append(doneButton);
  buttonGroup.append(deleteButton);
  item.append(buttonGroup);

  return {
    item,
    doneButton,
    deleteButton,
  }
}

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

let item = document.createElement('li');
/* <li></li> */
let buttonGroup = document.createElement('div');
/* <div></div> */
let doneButton = document.createElement('button');
/* <button></button> */
let deleteButton = document.createElement('button');
/* <button></button> */

Этот код создает элементы <li>, <div> и два <button>, всего получается четыре элемента.

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

Для каждого из элемента, добавляем аттрибуты и классы из библиотеки Bootstrap

item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
/* <li class="list-group-item d-flex justify-content-between align-items-center"></li> */
item.textContent = name;
/* <li>значение из аргумента name</li> */

buttonGroup.classList.add('btn-group', 'btn-group-sm');
/* <div class="btn-group btn-group-sm"></div> */

doneButton.classList.add('btn', 'btn-success');
/* <button class="btn btn-success"></button> */
doneButton.textContent = 'Готово';
/* <button>Готово</button> */

deleteButton.classList.add('btn', 'btn-danger');
/* <button class="btn btn-danger"></button> */
deleteButton.textContent = 'Удалить';
/* <button>Удалить</button> */

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

В третьем блоке кода мы вкладываем кнопки в div который помещаем в <li>.

buttonGroup.append(doneButton);
buttonGroup.append(deleteButton);
item.append(buttonGroup);

По итогу html разметка для одного дела будет выглядеть вот так.

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