Xây Dựng Ứng Dụng To-Do List Với JavaScript – Giao Diện Đẹp, Trải Nghiệm Thực Tế

Nếu bạn đang tìm kiếm một dự án nhỏ để luyện tập JavaScript, thì To-Do List là lựa chọn tuyệt vời. Dự án này giúp bạn thực hành thao tác DOM, lưu dữ liệu bằng LocalStorage, và tạo nên một giao diện tinh tế, hiện đại phù hợp với người dùng thật.

1. Giao diện tổng quan

Ứng dụng To-Do List được thiết kế tối giản, sử dụng tone màu pastel dịu mắt, có hiệu ứng hover nhẹ và bố cục gọn gàng. Người dùng có thể thêm, đánh dấu hoàn thành và xóa nhiệm vụ chỉ bằng vài cú click.

<div class="todo-container">
  <h2>My Tasks ✨</h2>
  <div class="todo-input">
    <input id="taskInput" type="text" placeholder="Nhập công việc..." />
    <button id="addBtn">Thêm</button>
  </div>
  <ul id="taskList"></ul>
</div>

2. CSS – Làm đẹp giao diện

body {
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.todo-container {
  width: 350px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 16px;
}

.todo-input {
  display: flex;
  gap: 8px;
}

.todo-input input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  outline: none;
}

.todo-input button {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 16px;
  transition: 0.2s;
}

.todo-input button:hover {
  opacity: 0.8;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  margin-bottom: 8px;
  transition: background 0.2s;
}

li.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

3. JavaScript – Xử lý chức năng To-Do List

const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});

function addTask() {
  const taskText = taskInput.value.trim();
  if (!taskText) return;

  const li = document.createElement('li');
  li.innerHTML = `
    <span>${taskText}</span>
    <button class="delete-btn">🗑️</button>
  `;
  li.addEventListener('click', (e) => {
    if (e.target.classList.contains('delete-btn')) {
      li.remove();
      saveTasks();
    } else {
      li.classList.toggle('completed');
      saveTasks();
    }
  });

  taskList.appendChild(li);
  taskInput.value = '';
  saveTasks();
}

function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#taskList li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed')
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const data = JSON.parse(localStorage.getItem('tasks')) || [];
  data.forEach(item => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span>${item.text}</span>
      <button class="delete-btn">🗑️</button>
    `;
    if (item.completed) li.classList.add('completed');
    li.addEventListener('click', (e) => {
      if (e.target.classList.contains('delete-btn')) {
        li.remove();
        saveTasks();
      } else {
        li.classList.toggle('completed');
        saveTasks();
      }
    });
    taskList.appendChild(li);
  });
}

loadTasks();

4. Kết luận

Với dự án To-Do List, bạn đã rèn luyện kỹ năng:

• Thao tác DOM và xử lý sự kiện
• Lưu và lấy dữ liệu từ LocalStorage
• Thiết kế giao diện hiện đại, thân thiện với người dùng

💡 Gợi ý: Hãy thử thêm hiệu ứng xoá mượt mà, hoặc chế độ sáng/tối để tăng trải nghiệm người dùng. Ứng dụng nhỏ, nhưng là nền tảng cho các sản phẩm web thực tế sau này.