Checklist JavaScript

Dalam pelajaran ini, kita akan mengimplementasikan checklist. Checklist adalah program yang memungkinkan membuat daftar rencana pekerjaan, kemudian seiring dengan penyelesaian pekerjaan tersebut, menandai pekerjaan yang telah selesai.

Mari kita buat agar pekerjaan dapat ditambahkan, dihapus, diedit, dan ditandai selesai.

Berikut contoh yang harus kita hasilkan (untuk memasukkan pekerjaan baru, ketik teks pada input dan tekan Enter, untuk mengedit lakukan double click pada teks pekerjaan):

Mulai

Jadi, mari kita mulai implementasi tugas yang dijelaskan.

Untuk memulai, mari tulis kode HTML untuk checklist kita. Biarkan tugas baru dimasukkan menggunakan input dan ditambahkan ke daftar ul:

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

Langsung tambahkan kode CSS, yang menambahkan sedikit keindahan pada checklist kita:

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

Seperti biasa, mari kita pecah tugas kompleks menjadi beberapa tahap sederhana.

Sebagai tahap pertama, buat agar teks dapat dimasukkan ke dalam input, tekan Enter - dan li ditambahkan ke akhir ul dengan teks yang dimasukkan.

Berikut kerangka kode yang mengimplementasikan hal yang dijelaskan:

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

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

Lengkapi bagian kode yang hilang untuk menyelesaikan tugas yang dijelaskan.

Modifikasi tugas sebelumnya sehingga setelah menekan tombol Enter, terjadi pembersihan teks input.