Hướng dẫn tạo To-Do List mini app bằng HTML, CSS và JavaScript

To-Do List mini app là gì?

To-Do List mini app là một ứng dụng web nhỏ hiển thị danh sách các công việc cần thực hiện. Người dùng có thể nhập tên công việc mới, thêm vào danh sách, đánh dấu hoàn thành hoặc xóa khỏi danh sách khi không còn cần thiết.

Phiên bản cơ bản có thể chạy hoàn toàn trên trình duyệt mà không cần tới hệ thống đăng nhập hoặc lưu trữ phức tạp.

Lợi ích khi xây dựng To-Do List bằng JavaScript

Tự xây dựng một To-Do List mini app mang lại nhiều lợi ích cho người học lập trình front end:

• Ôn lại kiến thức về thao tác với DOM, sự kiện và vòng lặp trong JavaScript.
• Luyện tập tổ chức cấu trúc HTML rõ ràng, dễ mở rộng.
• Thực hành phân tách giao diện, logic xử lý và dữ liệu.
• Tạo ra một tiện ích nhỏ có thể sử dụng hằng ngày để quản lý công việc.

Cấu trúc HTML cơ bản của To-Do List

Cấu trúc HTML của một To-Do List đơn giản thường bao gồm:

• Một ô nhập để gõ nội dung công việc mới.
• Một nút để thêm công việc vào danh sách.
• Một danh sách hiển thị các công việc hiện tại.

Ví dụ cấu trúc HTML tối giản:

<div class="todo-app">
    <h2>Danh sách công việc</h2>

    <div class="todo-input-row">
        <input id="todo-input" type="text" placeholder="Nhập công việc mới...">
        <button id="todo-add-btn" type="button">Thêm</button>
    </div>

    <ul id="todo-list">
        <!-- Các mục công việc sẽ được thêm vào đây bằng JavaScript -->
    </ul>

    <p id="todo-empty-message">Chưa có công việc nào.</p>
</div>

Danh sách công việc được hiển thị trong thẻ ul, mỗi mục mới sẽ được JavaScript thêm vào dưới dạng một phần tử li.

CSS cơ bản để trình bày danh sách công việc

Một số dòng CSS đơn giản có thể giúp danh sách công việc dễ theo dõi hơn và tăng khả năng đọc:

.todo-app {
    max-width: 480px;
    margin: 16px 0;
}

.todo-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#todo-input {
    flex: 1;
    padding: 6px 8px;
}

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

#todo-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
}

#todo-list li span {
    flex: 1;
    margin-left: 8px;
}

Phần CSS này tập trung vào việc căn chỉnh bố cục, loại bỏ ký hiệu đầu dòng mặc định của danh sách và tạo ranh giới nhẹ giữa các mục công việc.

Viết JavaScript để thêm, đánh dấu và xóa công việc

JavaScript là phần điều khiển toàn bộ hoạt động của To-Do List mini app. Khi người dùng nhấn nút Thêm hoặc nhấn Enter, một mục mới sẽ xuất hiện trong danh sách. Mỗi mục công việc có thể được đánh dấu hoàn thành hoặc xóa khỏi danh sách.

(function() {
    var input = document.getElementById("todo-input");
    var addButton = document.getElementById("todo-add-btn");
    var list = document.getElementById("todo-list");
    var emptyMessage = document.getElementById("todo-empty-message");

    function updateEmptyMessage() {
        var hasItems = list.children.length > 0;
        emptyMessage.style.display = hasItems ? "none" : "block";
    }

    function createTodoItem(text) {
        var li = document.createElement("li");

        var left = document.createElement("div");
        var checkbox = document.createElement("input");
        var span = document.createElement("span");
        var removeBtn = document.createElement("button");

        checkbox.type = "checkbox";
        span.textContent = text;
        removeBtn.type = "button";
        removeBtn.textContent = "Xóa";

        checkbox.addEventListener("change", function() {
            if (checkbox.checked) {
                span.style.textDecoration = "line-through";
                span.style.opacity = "0.6";
            } else {
                span.style.textDecoration = "none";
                span.style.opacity = "1";
            }
        });

        removeBtn.addEventListener("click", function() {
            list.removeChild(li);
            updateEmptyMessage();
        });

        left.appendChild(checkbox);
        left.appendChild(span);

        li.appendChild(left);
        li.appendChild(removeBtn);

        list.appendChild(li);
        updateEmptyMessage();
    }

    function handleAdd() {
        var text = input.value.trim();
        if (!text) {
            return;
        }
        createTodoItem(text);
        input.value = "";
        input.focus();
    }

    addButton.addEventListener("click", handleAdd);

    input.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
            handleAdd();
        }
    });

    updateEmptyMessage();
})();

Đoạn mã trên giúp ứng dụng có thể xử lý việc thêm công việc mới, đánh dấu hoàn thành bằng checkbox và xóa công việc khi không còn cần thiết.

Demo To-Do List mini app

Ví dụ dưới đây là một demo hoạt động trực tiếp của To-Do List mini app. Người đọc có thể nhập công việc mới, thêm vào danh sách, đánh dấu hoàn thành hoặc xóa từng mục.

Mở rộng tính năng cho To-Do List mini app

Sau khi hoàn thành phiên bản cơ bản, To-Do List mini app có thể được mở rộng với nhiều tính năng hữu ích:

• Lưu danh sách công việc bằng localStorage để không bị mất khi tải lại trang.
• Thêm bộ lọc hiển thị: tất cả, đã hoàn thành, chưa hoàn thành.
• Cho phép chỉnh sửa nội dung công việc trực tiếp ngay trên danh sách.
• Hiển thị số lượng công việc đang chờ xử lý và số lượng đã hoàn thành.

Kết luận

To-Do List mini app là một ví dụ thực tế giúp hiểu rõ cách kết hợp HTML, CSS và JavaScript để xây dựng ứng dụng web tương tác.

Thông qua việc xử lý thêm, đánh dấu và xóa công việc, người học có thể luyện tập thao tác với DOM, lắng nghe sự kiện và cập nhật giao diện theo trạng thái dữ liệu.

Từ nền tảng này, ứng dụng có thể phát triển thành một công cụ quản lý công việc cá nhân linh hoạt và tiện lợi hơn.