Xây Dựng Ứng Dụng Todo Đơn Giản Bằng JavaScript: Học Hỏi Từ Những Bước Cơ Bản

Ứng dụng Todo list đơn giản được xây dựng với JavaScript không chỉ giúp theo dõi các công việc hàng ngày mà còn là bài học thực tế về cách lập trình web giao diện và lưu trữ dữ liệu. Bài viết này sẽ giúp bạn hiểu được cách hoạt động của ứng dụng, đặc biệt là cách sử dụng DOM, xử lý sự kiện và localStorage để giữ trạng thái công việc.

Các tính năng cơ bản của ứng dụng Todo

Ứng dụng có thể:

• Thêm các công việc mới
• Chỉnh sửa công việc hiện có
• Xóa công việc
• Đánh dấu công việc đã hoàn thành
• Lưu dữ liệu công việc trên trình duyệt thông qua localStorage, giữ nguyên sau mỗi lần tải lại trang

Tuy đơn giản nhưng ứng dụng trình bày đầy đủ những khái niệm quan trọng phù hợp cho người mới học.

Lưu trữ và khôi phục dữ liệu công việc với localStorage

let todos = JSON.parse(localStorage.getItem("vals")) || [];

• Khi khởi chạy, ứng dụng kiểm tra xem có dữ liệu công việc gì đã lưu trong localStorage không
• Nếu có, thì chuyển chuỗi JSON đó thành mảng JavaScript để tiếp tục sử dụng
• Nếu không có, tạo mảng trống để bắt đầu lưu công việc mới

localStorage được ví như một "kệ nhỏ" để cất giữ dữ liệu giữa các phiên làm việc với trang web, giúp thông tin không bị mất khi đóng trình duyệt.

Hàm lưu dữ liệu

function savedata() {
  localStorage.setItem("vals", JSON.stringify(todos));
}

Do localStorage chỉ lưu được chuỗi ký tự, nên ta phải chuyển đổi mảng công việc thành chuỗi JSON bằng JSON.stringify() để lưu lại, đảm bảo dữ liệu được bảo toàn.

Tái tạo giao diện công việc

function renderTodos() {
  logg.innerHTML = "";
  // Tiếp tục tạo lại danh sách công việc
}

Trước khi hiển thị danh sách công việc mới, giao diện được "dọn dẹp" sạch sẽ để tránh trùng lặp hoặc dữ liệu lỗi. Ứng dụng xây dựng lại danh sách đầy đủ mỗi khi có thay đổi, thay vì cập nhật từng phần tử riêng biệt.

Xử lý từng công việc riêng biệt

Duyệt qua toàn bộ mảng todos để tạo phần tử hiển thị tương ứng, bao gồm tên công việc và trạng thái hoàn thành.

todos.forEach((todo, index) => {
  const span = document.createElement("span");
  span.innerText = todo.text;

  if (todo.done) span.classList.add("done");

  span.addEventListener("click", () => {
    todo.done = !todo.done;
    savedata();
    renderTodos();
  });

  // Tiếp tục thêm nút chỉnh sửa, xóa
});

• Công việc hoàn thành được gạch ngang để phân biệt
• Người dùng có thể nhấn vào từng công việc để chuyển trạng thái hoàn thành hoặc chưa hoàn thành

Chỉnh sửa và xóa công việc

Khi nhấn nút sửa, nội dung công việc sẽ được đưa vào ô nhập liệu và nút chức năng chuyển sang "Update" thay vì "Add". Sau khi sửa xong, dữ liệu được lưu lại và danh sách cập nhật.

Xóa công việc sẽ loại bỏ phần tử khỏi mảng, đồng thời cập nhật lại localStorage và UI.

Một hàm xử lý hai nhiệm vụ: Thêm hoặc cập nhật

function handleTask() {
  if (val === "") return;
  if (editIndex === -1) {
    todos.push({ text: val, done: false });
  } else {
    todos[editIndex].text = val;
    editIndex = -1;
    btn.innerText = "Add";
  }
  userinput.value = "";
  savedata();
  renderTodos();
}

• Nếu không phải đang chỉnh sửa, thêm công việc mới
• Nếu đang chỉnh sửa, cập nhật công việc theo chỉ số đã chọn
• Sau đó làm mới giao diện và lưu dữ liệu

Tăng trải nghiệm người dùng với phím Enter

Thay vì buộc người dùng phải nhấn nút, bắt sự kiện phím Enter tại ô nhập liệu giúp thao tác thêm/cập nhật công việc mượt mà hơn.

Bài học và ý nghĩa thực tiễn

Dự án nhỏ này đi qua các khái niệm then chốt:

• DOM Manipulation: thao tác, tạo, xóa phần tử HTML bằng JavaScript
• Event Handling: xử lý sự kiện click, keypress
• Quản lý dữ liệu cơ bản: sử dụng mảng và đối tượng
• Lưu trữ trên trình duyệt: làm việc với localStorage
• Đồng bộ giao diện và dữ liệu: cập nhật liên tục UI theo trạng thái dữ liệu

Đây chính là tiền đề cho các ứng dụng web phức tạp hơn, cũng như phương pháp tư duy của lập trình viên.

Xem các video hướng dẫn thường chỉ dạy bạn làm thế nào, nhưng tự tay xây dựng mới giúp bạn hiểu vì sao những điều đó lại hoạt động như vậy.

Nên phát triển chức năng gì tiếp theo?

• Thêm ngày hết hạn cho công việc
• Đặt mức ưu tiên
• Tạo chế độ giao diện tối (dark mode)
• Cải thiện hiệu ứng chuyển động, animation

Ngoài việc học thuật toán, các cải tiến này giúp bạn làm quen với design và UX trong lập trình front-end.

Kết luận

Mỗi dòng code trong dự án này là một bước tiến cho kỹ năng lập trình JavaScript và tư duy giải quyết vấn đề. Nếu bạn đang trì hoãn xây dựng một ý tưởng nhỏ, hãy bắt đầu từ đó, giữ cho nó đơn giản và dần phát triển.

Ứng dụng Todo không chỉ là một tiện ích quản lý việc làm, mà còn là bài học về cách biến một ý tưởng thành sản phẩm thực tế qua từng dòng lệnh.