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:

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

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

cssbody {
  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é:

javascriptlet 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
  }
});