Checklist w JavaScript

W tej lekcji zaimplementujemy checklistę. Checklistą nazywamy program, który umożliwia stworzenie listy planowanych zadań, a następnie, w miarę ich wykonywania, oznaczanie tych zadań jako wykonane.

Zróbmy tak, aby zadania można było dodawać, usuwać, edytować i oznaczać jako wykonane.

Oto wzór tego, co powinno nam wyjść (aby wprowadzić nowe zadanie, wpisz tekst w pole input i naciśnij Enter, aby edytować wykonaj podwójne kliknięcie na tekście zadania):

Zaczynamy

A zatem, przystąpmy do realizacji opisanego zadania.

Na początek napiszmy kod HTML dla naszej checklisty. Niech nowe zadania będą wprowadzane za pomocą inputa i dodawane do listy ul:

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

Od razu dodajmy kod CSS, dodający pewną urodę naszej liście:

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

Jak zwykle, podzielmy złożone zadanie na proste etapy.

Jako pierwszy etap zróbmy tak, aby w pole input można było wpisać tekst, nacisnąć Enter - i na końcu ul dodała się li z wprowadzonym tekstem.

Oto szablon kodu, realizujący opisane:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // tutaj będzie kod do dodania nowej li do listy
  }
});