# Чеклист на JavaScript

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

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

Вот образец того, что у нас должно получится (для ввода нового дела введите текст в инпут и нажмите `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` происходила очистка текста инпута.

← →
↑
en ru