Checklist v JavaScriptu

V této lekci implementujeme checklist. Checklist je program, který umožňuje vytvořit seznam plánovaných úkolů a poté v průběhu jejich plnění tyto úkoly označovat jako splněné.

Pojďme zařídit, aby bylo možné úkoly přidávat, mazat, upravovat a označovat jako splněné.

Zde je ukázka toho, co bychom měli dostat (pro zadání nového úkolu zadejte text do vstupního pole a stiskněte Enter, pro úpravu proveďte dvojklik na text úkolu):

Začněme

Takže, pusťme se do realizace popsaného úkolu.

Pro začátek napíšeme HTML kód pro náš checklist. Nechť nové úkoly jsou zadávány pomocí vstupního pole a přidávány do seznamu ul:

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

Rovnou přidáme CSS kód, který přidá určitou krásu našemu checklistu:

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

Jako obvykle rozdělíme složitý úkol na jednoduché etapy.

Jako první etapu zařídíme, aby do vstupního pole bylo možné zadat text, stisknout Enter - a na konec ul se přidala li s zadaným textem.

Zde je kostra kódu, která implementuje popsané:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// zde bude kód pro přidání nové li do seznamu
	}
});

Doplňte chybějící část kódu pro řešení popsaného úkolu.

Upravte předchozí úkol tak, aby po stisknutí klávesy Enter došlo k vymazání textu vstupního pole.