JavaScript-da cheklist

Ushbu darsda biz cheklistni amalga oshiramiz. Cheklist - bu rejalashtirilgan ishlar ro'yxatini yaratishga va keyin bu ishlar bajarilishi bilan ularni bajarilgan deb belgilashga imkon beradigan dasturdir.

Keling, ishlarni qo'shish, o'chirish, tahrirlash va bajarilgan deb belgilash imkoniyatini yarataylik.

Biz qilishimiz kerak bo'lgan narsaning namunasi quyida (yangi ish kiritish uchun matnni inputga kiriting va Enter tugmasini bosing, tahrirlash uchun ish matniga ikki marta bosing):

Boshlaymiz

Xo'sh, tavsiflangan vazifani amalga oshirishni boshlaymiz.

Boshlash uchun cheklistimiz uchun HTML kodini yozamiz. Yangi vazifalar input orqali kiritilsin va ul ro'yxatiga qo'shilsin:

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

Darhol cheklistimizga biroz joziba qo'shadigan CSS kodini qo'shamiz:

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

Odatdagidek, murakkab vazifani oddiy bosqichlarga ajratamiz.

Birinchi bosqich sifatida, inputga matn kiritish, Enter tugmasini bosish - va ul oxiriga kiritilgan matnli li qo'shilishini ta'minlaymiz.

Tavsiflangan narsani amalga oshiradigan kod tayyorgarligi quyida:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// bu yerda ro'yxatga yangi li qo'shish uchun kod bo'ladi
	}
});

Tavsiflangan vazifani yechish uchun etishmayotgan kod qismini to'ldiring.

Oldingi vazifani shunday o'zgartiringki, Enter tugmasi bosilgandan so'ng input matni tozalansin.