Checklist dalam JavaScript

Dalam pelajaran ini, kita akan melaksanakan checklist. Checklist ialah program yang membolehkan membuat senarai tugas yang dirancang, dan kemudian apabila tugas-tugas ini diselesaikan, menandakan tugas-tugas ini sebagai selesai.

Mari kita buat supaya tugas boleh ditambah, dipadam, disunting dan ditandakan sebagai selesai.

Berikut adalah contoh apa yang sepatutnya kita dapat (untuk memasukkan tugas baru, taip teks dalam input dan tekan Enter, untuk menyunting lakukan double click pada teks tugas):

Mari Mulakan

Jadi, mari kita mulakan pelaksanaan tugas yang diterangkan.

Untuk permulaan, tulis kod HTML untuk checklist kami. Biarkan tugas baru dimasukkan menggunakan input dan ditambah ke dalam senarai ul:

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

Serta tambah kod CSS, yang menambah sedikit kecantikan kepada checklist kami:

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

Seperti biasa, mari kita pecahkan tugas yang kompleks kepada beberapa tahap yang mudah.

Sebagai tahap pertama, mari kita buat supaya teks boleh dimasukkan ke dalam input, tekan Enter - dan li ditambah pada akhir ul dengan teks yang dimasukkan.

Berikut adalah rangka kod yang melaksanakan apa yang diterangkan:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// di sini akan ada kod untuk menambahkan li baru ke dalam senarai
	}
});

Tulis bahagian kod yang hilang untuk menyelesaikan tugas yang diterangkan.

Ubah suai tugas sebelumnya supaya selepas menekan kekunci Enter, teks input akan dipadam.