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:

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

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

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

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