Чэкліст на 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 адбывалася ачыстка тэксту інпута.