📝 Hướng dẫn tạo ứng dụng Todo List bằng HTML, CSS và JavaScript

Giới thiệu

Todo List là một ứng dụng nhỏ nhưng rất hữu ích để ghi nhớ và theo dõi các công việc cần làm. Trong bài viết này, bạn sẽ học cách tạo một ứng dụng như vậy chỉ với HTML, CSS và JavaScript — không cần thư viện hay framework nào cả.

ul>li*5

🎯 Mục tiêu

🧱 Bước 1: Tạo cấu trúc HTML

Chúng ta sẽ bắt đầu bằng cách xây dựng phần giao diện (UI) cơ bản với HTML. 

      
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Todo List App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="todo-container">
    <h1>Todo List</h1>
    <div class="input-section">
      <input type="text" id="todo-input" placeholder="Nhập công việc..." />
      <button id="add-button">Thêm</button>
    </div>
    <ul id="todo-list"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

👉 Giải thích: Phần tử input để người dùng nhập công việc, button để thêm công việc, ul sẽ chứa danh sách li các công việc.

🎨 Bước 2: Thêm CSS để giao diện dễ nhìn

Tạo file style.css và dán vào đoạn mã sau:

      
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.todo-container {
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#todo-input {
  flex: 1;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#add-button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#add-button:hover {
  background-color: #0056b3;
}

#todo-list {
  list-style: none;
  padding: 0;
}

#todo-list li {
  display: flex;
  justify-content: space-between;
  background: #f8f8f8;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 5px;
}

.delete-button {
  background-color: red;
  color: white;
  border: none;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}

👉 Giải thích: Giao diện đẹp và rõ ràng hơn, các phần tử div, input, button và ul được căn chỉnh hợp lý.

⚙️ Bước 3: Viết JavaScript để xử lý chức năng

Tạo file script.js và thêm đoạn mã sau:

      
const addButton = document.getElementById('add-button');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');

addButton.addEventListener('click', function () {
  const taskText = input.value.trim();

  if (taskText === '') {
    alert('Bạn chưa nhập công việc!');
    return;
  }

  const listItem = document.createElement('li');
  listItem.textContent = taskText;

  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Xóa';
  deleteBtn.className = 'delete-button';
  deleteBtn.onclick = function () {
    list.removeChild(listItem);
  };

  listItem.appendChild(deleteBtn);
  list.appendChild(listItem);

  input.value = '';
});

👉 Giải thích: Xử lý sự kiện khi nhấn button, tạo mới phần tử li chứa nội dung công việc và nút Xóa. Khi nhấn nút xóa, li tương ứng sẽ bị loại bỏ khỏi ul.

✅ Kết quả cuối cùng

Ứng dụng Todo List đã có thể thêm, hiển thị và xóa công việc. Bạn có thể nhập công việc vào ô input, nhấn nút "Thêm" để thêm vào danh sách, và bấm "Xóa" để loại bỏ công việc đã hoàn thành.

🧠 Gợi ý nâng cao