Bài 11: Mini Project Web tĩnh – To-Do List bằng JavaScript
🎯 Mục tiêu
- Vận dụng HTML, CSS, JavaScript đã học để làm sản phẩm hoàn chỉnh
- Biết thêm / xóa / đánh dấu công việc
- Biết thao tác DOM thực tế
- (Nâng cao) Lưu dữ liệu bằng
localStorage
📘 Mô tả bài toán
Bạn sẽ xây dựng một To-Do List đơn giản:
- Nhập công việc cần làm
- Bấm “Thêm” để thêm vào danh sách
- Bấm vào công việc để đánh dấu hoàn thành
- Bấm “Xóa” để xóa công việc
💻 Code mẫu (To-Do List hoàn chỉnh)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 11 - To Do List</title>
<style>
body{
font-family: Arial;
background:#f7f8fa;
padding: 24px;
line-height: 1.7;
}
.app{
max-width: 520px;
margin: 0 auto;
background:#fff;
border:1px solid #e5e5e5;
border-radius: 14px;
padding: 18px;
}
h1{
margin-top:0;
text-align:center;
}
.row{
display:flex;
gap:10px;
margin-bottom: 14px;
}
input{
flex:1;
padding:10px 12px;
border:1px solid #ddd;
border-radius: 10px;
}
button{
padding:10px 14px;
border:0;
border-radius: 10px;
cursor:pointer;
background:#2563eb;
color:#fff;
font-weight:600;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
display:flex;
justify-content: space-between;
align-items:center;
padding:10px 12px;
border:1px solid #e5e5e5;
border-radius: 10px;
margin-bottom: 8px;
cursor:pointer;
}
li.done{
text-decoration: line-through;
color:#999;
background:#f3f4f6;
}
.del{
background:#ef4444;
border:0;
border-radius: 8px;
color:#fff;
padding:6px 10px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="app">
<h1>📝 To-Do List</h1>
<div class="row">
<input id="taskInput" type="text" placeholder="Nhập công việc...">
<button id="btnAdd">Thêm</button>
</div>
<ul id="list"></ul>
</div>
<script>
const input = document.getElementById("taskInput");
const btnAdd = document.getElementById("btnAdd");
const list = document.getElementById("list");
function addTask(text){
if(text.trim() === "") return;
const li = document.createElement("li");
li.innerHTML = "<span>" + text + "</span>";
const del = document.createElement("button");
del.textContent = "Xóa";
del.className = "del";
// đánh dấu hoàn thành
li.addEventListener("click", function(){
li.classList.toggle("done");
});
// xóa
del.addEventListener("click", function(e){
e.stopPropagation(); // không kích hoạt click li
li.remove();
});
li.appendChild(del);
list.appendChild(li);
input.value = "";
}
btnAdd.addEventListener("click", function(){
addTask(input.value);
});
input.addEventListener("keydown", function(e){
if(e.key === "Enter"){
addTask(input.value);
}
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai11.html → mở bằng Chrome.
Thử thêm, click hoàn thành, và xóa công việc.
✍️ Bài tập
- Hiển thị tổng số công việc.
- Hiển thị số công việc đã hoàn thành.
- (Nâng cao) Lưu danh sách vào
localStorage. - (Nâng cao) Thêm nút “Xóa tất cả”.
✅ Đáp án gợi ý
1) Đếm số công việc
const total = document.querySelectorAll("#list li").length;
2) Lưu localStorage (gợi ý)
localStorage.setItem("tasks", list.innerHTML);
list.innerHTML = localStorage.getItem("tasks") || "";
3) Nút xóa tất cả
list.innerHTML = "";
📌 Danh sách đóng góp bài viết