JavaScript ile Kontrol Listesi

Bu derste bir kontrol listesi uygulaması gerçekleştireceğiz. Kontrol listesi, planlanan işlerin bir listesini oluşturmanıza ve ardından bu işler tamamlandıkça onları yapılmış olarak işaretlemenize olanak tanıyan bir programdır.

İşlerin eklenebilmesini, silinebilmesini, düzenlenebilmesini ve yapıldı olarak işaretlenebilmesini sağlayalım.

Elde etmemiz gereken sonucun bir örneği aşağıdadır (yeni bir iş girmek için metni input alanına yazın ve Enter tuşuna basın, düzenleme yapmak için işin metnine çift tıklayın):

Başlayalım

Peki, tanımlanan görevi uygulamaya koyulalım.

İlk olarak kontrol listemiz için HTML kodunu yazalım. Yeni görevlerin bir input ile girilmesine ve ul listesine eklenmesine izin verelim:

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

Hemen, kontrol listemize biraz güzellik katan CSS kodunu ekleyelim:

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

Her zamanki gibi, karmaşık görevi basit adımlara bölelim.

İlk aşama olarak, input alanına metin girilebilmesini, Enter tuşuna basıldığında - ve ul'nun sonuna girilen metinle birlikte bir li eklenmesini sağlayalım.

Açıklananı uygulayan kodun taslağı aşağıdadır:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// burada listeye yeni li ekleme kodu olacak
	}
});

Açıklanan görevi çözmek için eksik kodu tamamlayın.

Önceki görevi, Enter tuşuna basıldıktan sonra input metninin temizlenmesi olacak şekilde değiştirin.