Чеклист дар 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 тоза кардани матни воридӣ рӯй диҳад.