Checklist v JavaScripte

V tejto lekcii implementujeme checklist. Checklist je program, ktorý umožňuje vytvoriť zoznam plánovaných úloh a potom postupne pri ich vykonávaní označiť tieto úlohy ako dokončené.

Urobme to tak, aby bolo možné úlohy pridávať, odstraňovať, upravovať a označovať ako dokončené.

Tu je ukážka toho, čo by sme mali dostať (pre zadanie novej úlohy zadajte text do vstupného poľa a stlačte Enter, pre úpravu vykonajte dvojklik na text úlohy):

Začnime

Takže, poďme sa pustiť do implementácie opísanej úlohy.

Na začiatok napíšme HTML kód pre náš checklist. Nech sa nové úlohy zadávajú pomocou vstupného poľa a pridávajú do zoznamu ul:

<input id="input">
<ul id="list"></ul>

Hneď pridajme CSS kód, ktorý pridá nejakú krásu nášmu checklistu:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

Ako obvykle, rozdeľme zložitú úlohu na jednoduché etapy.

Ako prvú etapu urobme to, aby do vstupného poľa bolo možné zadať text, stlačiť Enter - a na koniec ul sa pridala li s zadaným textom.

Tu je príprava kódu, ktorá implementuje opísané:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// tu bude kód pre pridanie novej li do zoznamu
	}
});

Doplňte chýbajúcu časť kódu pre riešenie opísanej úlohy.

Upravte predchádzajúcu úlohu tak, aby po stlačení klávesy Enter došlo k vymazaniu textu vstupného poľa.