JavaScript-də Çeklist

Bu dərsdə biz çeklisti həyata keçirəcəyik. Çeklist, planlaşdırılan işlərin siyahısını yaratmağa və sonra həmin işlər yerinə yetirildikcə onları yerinə yetirilmiş kimi qeyd etməyə imkan verən proqram adlanır.

Gəlin elə edək ki, işləri əlavə etmək, silmək, redaktə etmək və yerinə yetirilmiş kimi qeyd etmək mümkün olsun.

Budur, əldə etməli olduğumuz nəticənin nümunəsi (yeni iş daxil etmək üçün mətni inputa daxil edin və Enter düyməsini basın, redaktə etmək üçün işin mətninə iki dəfə klik edin):

Başlayaq

Beləliklə, təsvir olunan tapşırığın həyata keçirilməsinə başlayaq.

Başlamaq üçün çeklistimiz üçün HTML kodunu yazaq. Yeni tapşırıqlar input vasitəsilə daxil edilsin və ul siyahısına əlavə edilsin:

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

Dərhal çeklistimizə bir qədər gözəllik əlavə edən CSS kodunu əlavə edək:

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

Həmişə olduğu kimi, mürəkkəb tapşırığı sadə mərhələlərə bölək.

İlk mərhələ kimi gəlin elə edək ki, inputa mətn daxil edə biləsiniz, Enter düyməsini basın - və ul-nin sonuna daxil edilmiş mətnlə li əlavə edilsin.

Budur, təsvir olunanları həyata keçirən kodun hazırlanmış hissəsi:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// burada siyahıya yeni li əlavə etmək üçün kod olacaq
	}
});

Təsvir olunan tapşırığı həll etmək üçün çatışmayan kod hissəsini yazın.

Əvvəlki tapşırığı elə dəyişin ki, Enter düyməsi basıldıqdan sonra inputun mətni təmizlənsin.