Чеклист на JavaScript

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

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

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

Почнимо

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

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

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

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

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

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

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

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

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

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

Допишите недостајући део кода за решавање описаног задатка.

Модификујте претходни задатак тако да након притиска тастера Enter дође до чишћења текста поља за унос.