Danh sách kiểm tra bằng JavaScript

Trong bài học này, chúng ta sẽ thực hiện một danh sách kiểm tra. Danh sách kiểm tra là một chương trình cho phép tạo ra một danh sách những việc cần làm, và sau đó khi hoàn thành từng việc, đánh dấu việc đó là đã xong.

Hãy làm sao để các việc có thể thêm vào, xóa, chỉnh sửa và đánh dấu là đã hoàn thành.

Đây là mẫu của kết quả chúng ta cần đạt được (để nhập việc mới, hãy nhập văn bản vào ô nhập liệu và nhấn Enter, để chỉnh sửa hãy nhấp đúp chuột vào văn bản của việc):

Bắt đầu

Vậy là, hãy bắt đầu thực hiện nhiệm vụ đã mô tả.

Đầu tiên hãy viết mã HTML cho danh sách kiểm tra của chúng ta. Hãy để các nhiệm vụ mới được nhập bằng ô nhập liệu và được thêm vào danh sách ul:

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

Hãy thêm ngay mã CSS, bổ sung một chút vẻ đẹp cho danh sách kiểm tra của chúng ta:

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

Như thường lệ, hãy chia nhỏ nhiệm vụ phức tạp thành các bước đơn giản.

Là bước đầu tiên, hãy làm sao để có thể nhập văn bản vào ô nhập liệu, nhấn Enter - và vào cuối ul sẽ thêm vào một li với văn bản đã nhập.

Đây là mã khung, thực hiện điều đã mô tả:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// tại đây sẽ là mã để thêm li mới vào danh sách
	}
});

Hãy viết phần mã còn thiếu để giải quyết nhiệm vụ đã mô tả.

Hãy sửa đổi nhiệm vụ trước đó sao cho sau khi nhấn phím Enter, văn bản trong ô nhập liệu sẽ bị xóa.