Чэкліст на 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 ў спіс
  }
});