Dnevnik zadataka na JavaScript-u

U ovoj lekciji ćemo implementirati dnevnik zadataka. Dnevnikom zadataka (checklist) naziva se program koji omogućava pravljenje spiska planiranih zadataka, a zatim da se postupkom izvršenja tih zadataka oni označe kao urađeni.

Hajde da napravimo tako da se zadaci mogu dodavati, brisati, uređivati i označavati kao urađeni.

Ovo je primer kako bi naš konačni rezultat trebalo da izgleda (za unos novog zadatka unesite tekst u polje za unos i pritisnite Enter, za uređivanje izvršite dvoklik na tekst zadatka):

Počnimo

Dakle, pristupimo realizaciji opisanog zadatka.

Za početak, napišimo HTML kod za naš dnevnik zadataka. Neka se novi zadaci unose pomoću polja za unos i dodaju u listu ul:

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

Odmah ćemo dodati CSS kod koji dodaje nešto lepote našem dnevniku zadataka:

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

Kao i obično, podelićemo složeni zadatak na jednostavne faze.

Kao prvu fazu, napravićemo da u polje za unos možemo uneti tekst, pritisnuti Enter - i na kraj liste ul doda li sa unetim tekstom.

Ovo je kostur koda koji realizuje opisano:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// ovde će biti kod za dodavanje nove li u listu
	}
});

Dopunite nedostajući deo koda za rešavanje opisanog zadatka.

Izmenite prethodni zadatak tako da nakon pritiska tastera Enter dođe do brisanja teksta iz polja za unos.