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:

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

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

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

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