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