Чеклист на 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 в списъка
  }
});