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 баскандан кийин инпуттун тексти тазалангандыгын кылгыла.