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:

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

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

body {
	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:

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

Dopisz brakującą część kodu do rozwiązania opisanego zadania.

Zmodyfikuj poprzednie zadanie tak, aby po naciśnięciu klawisza Enter następowało wyczyszczenie tekstu w polu input.