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 кушилишини таъминлаймиз.

Сўнгги тавсирланганни амалга оширадиган коднинг заготовкаси:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// ущербда руйхатга янги li кушиш учун код булади
	}
});

Сўнгги тавсирланган вазифани ечиш учун етисмайётган код кисмини тўлдиринг.

Олдинги вазифани шундай модификация килингки, Enter калавкуши босилгандан сўнг киритувнинг матни тозалансин.