Чеклист на JavaScript

У овој лекцији ћемо имплементирати чеклист. Чеклист је програма која омогућава прављење списка планираних задатака, а затим по испуњавању тих задатака означавање истих као обављене.

Хајде да направимо да се задаци могу додавати, брисати, уређивати и означавати као обављене.

Ево узорка онога што би требало да добијемо (за унос новог задатака унесите текст у поље и притисните Enter, за уређивање извршите дупли клик на текст задатка):

Почнимо

Дакле, приступимо имплементацији описаног задатка.

За почетак напишимо HTML код за наш чеклист. Нека се нови задаци уносе помоћу поља за унос и додају у списак ul:

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

Одмах додајмо CSS код који даје неку лепоту нашем чеклисту:

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

Као и обично, поделимо сложен задатак на једноставне фазе.

Као прву фазу направимо да се у поље за унос може унети текст, притисне Enter - и на крај ul дода li са унесеним текстом.

Ево скелета кода који имплементира описанo:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // овде ће бити код за додавање нове li у списак
  }
});