Чеклист на 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 со внесениот текст.

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

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

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