Чеклист на 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 да се извършва изчистване на текста в полето за въвеждане.