[Chia sẻ Code] Tạo chức năng To-do List bằng HTML CSS Js

1. Chức năng Todo-list là gì?

Todo-list (Danh sách công việc) là một công cụ đơn giản nhưng hiệu quả giúp người dùng ghi lại, quản lý và theo dõi các nhiệm vụ cần làm. Nó thường được sử dụng để liệt kê những công việc hàng ngày, mục tiêu cá nhân hoặc kế hoạch dài hạn.

2. Tầm quan trọng của Todo-list

• Quản lý công việc hiệu quả: Todo-list giúp bạn không bỏ sót nhiệm vụ nào và tăng cường khả năng tổ chức.
• Tăng năng suất: Khi có một danh sách rõ ràng, bạn có thể tập trung vào từng nhiệm vụ cụ thể, giảm thiểu sự lãng phí thời gian.
• Cải thiện động lực: Việc đánh dấu các nhiệm vụ đã hoàn thành tạo cảm giác thành tựu, giúp bạn có động lực tiếp tục.
• Giảm căng thẳng: Khi các nhiệm vụ được ghi lại rõ ràng, bạn sẽ không phải lo lắng về việc quên mất điều gì quan trọng.

Có thể bạn quan tâm:

• Dịch vụ thiết kế website
• Dịch vụ Hosting giá rẻ

3. Lý do nên sử dụng Todo-list

• Dễ sử dụng: Chỉ cần nhập nội dung công việc, theo dõi và đánh dấu hoàn thành.
• Truy cập nhanh chóng: Với ứng dụng web đơn giản, bạn có thể sử dụng trên mọi thiết bị.
• Có thể tùy chỉnh: Dễ dàng mở rộng, thêm các tính năng khác như thông báo, ưu tiên công việc, v.v.

4. Giải thích chi tiết đoạn mã HTML, CSS, JavaScript

Tải về miễn phí Đoạn Code tạo To-do List bằng HTML CSS Js tại đây.

4.1. Phần HTML

<div class="wrapper">
    <div class="box">
        <input placeholder="Nội dung" type="text" id="inputData" autofocus>
        <button onclick="addItem()" id="clickBtn">Thêm</button>
    </div>
    <ul id="content"></ul>
</div>

• input: Trường nhập liệu để người dùng nhập nội dung công việc.
• button: Khi nhấn vào, hàm addItem() sẽ được gọi để thêm công việc vào danh sách.
• ul: Danh sách chứa các công việc được thêm vào.

4.2. Phần CSS

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #c57eff, #b375ff, #6300FF);
}

.wrapper {
    width: 430px;
    min-height: 350px;
    border-radius: 12px;
    background: #6300FF;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

• Thiết lập giao diện: Sử dụng display: flex để căn giữa nội dung.
• Màu nền gradient: Tạo hiệu ứng màu sắc cho trang web.
• Bo góc và đổ bóng: Giúp giao diện trông chuyên nghiệp hơn.

4.3. Phần JavaScript

const data = document.querySelector("#inputData");
const contentItem = document.querySelector("#content");

const addItem = () => {
    if (data.value) {
        const listItem = document.createElement("li");
        listItem.innerHTML = `
            ${data.value}
            <i class="fa-solid fa-xmark"></i>
        `;
        data.value = "";
        
        listItem.addEventListener("click", () => {
            listItem.classList.toggle("done");
        });

        listItem.querySelector("i").addEventListener("click", () => {
            listItem.remove();
        });
        
        contentItem.prepend(listItem);
    }
};

• Lấy dữ liệu đầu vào: document.querySelector("#inputData") lấy giá trị nhập từ người dùng.
• Thêm công việc vào danh sách:
  • Tạo một phần tử <li> để chứa nội dung công việc.
  • Chèn một biểu tượng <i> để có thể xóa công việc.
  • Gán sự kiện click để đánh dấu hoàn thành bằng cách thêm class done.
• Xóa công việc: Khi nhấn vào biểu tượng fa-xmark, công việc sẽ bị xóa khỏi danh sách.

5. Kết luận

Chức năng Todo-list là một công cụ đơn giản nhưng mang lại hiệu quả cao trong việc quản lý công việc cá nhân. Đoạn mã trên minh họa cách xây dựng một Todo-list cơ bản bằng HTML, CSS và JavaScript, giúp người dùng dễ dàng theo dõi và quản lý nhiệm vụ hàng ngày.

Tải về miễn phí Đoạn Code tạo To-do List bằng HTML CSS Js tại đây.