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 пернесін басқаннан кейін енгізу өрісінің мәтіні тазартылатындай етіп өзгертіңіз.