В данном уроке мы реализуем чеклист. Чеклистом называется программа, которая позволяет сделать список планируемых дел, а затем по мере выполнения этим дел отмечать эти дела сделанными.
Давайте сделаем так, чтобы дела можно было добавлять, удалять, редактировать и отмечать сделанными.
Вот образец того, что у нас должно получится
(для ввода нового дела введите текст в инпут
и нажмите Enter, для редактирования
выполните двойной клик по тексту дела):
Начнем
Итак, приступим к реализации описанной задачи.
Для начала напишем HTML код для нашего чеклиста.
Пусть новые задачи вводятся с помощью инпута
и добавляются в список ul:
<input id="input">
<ul id="list"></ul>
Сразу добавим CSS код, добавляющий некоторую красоту нашему чеклисту:
body {
text-align: center;
}
#input, #list {
display: inline-block;
}
#list {
padding: 0;
list-style-type: none;
}
Как обычно, разобьем сложную задачу на простые этапы.
В качестве первого этапа сделаем так, чтобы
в инпут можно было ввести текст, нажать Enter
- и в конец ul добавилась li
с введенным текстом.
Вот заготовка кода, реализующая описанное:
let input = document.querySelector('#input');
let list = document.querySelector('#list');
input.addEventListener('keypress', function(event) {
if (event.key == 'Enter') {
// здесь будет код для добавление новой li в список
}
});
Допишите недостающую часть кода для решения описанной задачи.
Модифицируйте предыдущую задачу так, чтобы
после нажатия клавиши Enter происходила
очистка текста инпута.