Чеклист на JavaScript

В данном уроке мы реализуем чеклист. Чеклистом называется программа, которая позволяет сделать список планируемых дел, а затем по мере выполнения этим дел отмечать эти дела сделанными.

Давайте сделаем так, чтобы дела можно было добавлять, удалять, редактировать и отмечать сделанными.

Вот образец того, что у нас должно получится (для ввода нового дела введите текст в инпут и нажмите Enter, для редактирования выполните двойной клик по тексту дела):

Начнем

Итак, приступим к реализации описанной задачи.

Для начала напишем HTML код для нашего чеклиста. Пусть новые задачи вводятся с помощью инпута и добавляются в список ul:

html<input id="input">
<ul id="list"></ul>

Сразу добавим CSS код, добавляющий некоторую красоту нашему чеклисту:

cssbody {
  text-align: center;
}
#input, #list {
  display: inline-block;
}
#list {
  padding: 0;
  list-style-type: none;
}

Как обычно, разобьем сложную задачу на простые этапы.

В качестве первого этапа сделаем так, чтобы в инпут можно было ввести текст, нажать Enter - и в конец ul добавилась li с введенным текстом.

Вот заготовка кода, реализующая описанное:

javascriptlet input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // здесь будет код для добавление новой li в список
  }
});