เช็คลิสต์ด้วย JavaScript

ในบทเรียนนี้ เราจะนำเช็คลิสต์ไปปฏิบัติ เช็คลิสต์คือโปรแกรมที่อนุญาตให้ สร้างรายการสิ่งที่ต้องทำ จากนั้น ในระหว่างการดำเนินการ ทำเครื่องหมายงานเหล่านั้น ว่าเสร็จสมบูรณ์แล้ว

มาทำให้สามารถ เพิ่ม ลบ แก้ไข และทำเครื่องหมาย งานว่าสำเร็จแล้วได้

นี่คือตัวอย่างสิ่งที่เราควรจะได้ (เพื่อป้อนงานใหม่ ให้ป้อนข้อความในอินพุต และกด Enter สำหรับการแก้ไข ให้ดับเบิลคลิกที่ข้อความของงาน):

เริ่มต้นกันเลย

เอาล่ะ มาดำเนินการตามงานที่อธิบายไว้

เริ่มต้นด้วยการเขียนโค้ด HTML สำหรับเช็คลิสต์ของเรา ให้งานใหม่ถูกป้อนโดยใช้อินพุต และเพิ่มลงในรายการ ul:

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

เพิ่มโค้ด CSS ทันที เพื่อเพิ่มความ สวยงามให้กับเช็คลิสต์ของเรา:

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

ตามปกติ แบ่งงานที่ซับซ้อนออกเป็นขั้นตอนง่ายๆ หลายขั้นตอน

ในฐานะขั้นตอนแรก มาทำให้ สามารถป้อนข้อความลงในอินพุต กด Enter - และ li จะถูกเพิ่มท้าย ul พร้อมกับข้อความที่ป้อน

นี่คือโครงร่างโค้ดที่ใช้ปฏิบัติตามที่อธิบาย:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// จะมีโค้ดสำหรับเพิ่ม li ใหม่ลงในรายการที่นี่
	}
});

เขียนส่วนของโค้ดที่ขาดหายไปเพื่อแก้ไข งานที่อธิบายไว้

ปรับเปลี่ยนงานก่อนหน้านี้เพื่อให้ หลังจากกดปุ่ม Enter แล้ว ข้อความในอินพุตจะถูกล้าง