Bài viết gần đây

| Simple To-Do List project

Được viết bởi Đặng Trí Thanh vào ngày 13/11/2025 lúc 06:11 | 149 lượt xem

Simple To-Do List project

Simple To-Do List project

Todo List

Một ứng dụng To-Do List là một trong những dự án cơ bản và thiết thực nhất mà bất kỳ lập trình viên nào cũng nên thử làm khi học một ngôn ngữ hoặc framework mới. Trong bài viết này, chúng ta sẽ đi qua các bước để xây dựng một ứng dụng To-Do List đơn giản từ đầu đến cuối, sử dụng HTML, CSS và JavaScript.

Tại sao nên làm dự án To-Do List?

Todo List

Dự án To-Do List có vẻ đơn giản, nhưng nó bao gồm nhiều khái niệm quan trọng trong lập trình:

  • CRUD operations (Create, Read, Update, Delete): Thêm, hiển thị, cập nhật và xóa các nhiệm vụ
  • Event handling: Xử lý các sự kiện người dùng như click và submit
  • DOM manipulation: Thay đổi nội dung trang web một cách linh hoạt
  • Local storage: Lưu trữ dữ liệu trên trình duyệt của người dùng
  • Form validation: Xác thực dữ liệu nhập vào từ người dùng

Những kỹ năng này là nền tảng cho bất kỳ ứng dụng web nào, từ đơn giản đến phức tạp.

Các tính năng của ứng dụng

Ứng dụng To-Do List chúng ta sẽ xây dựng có các tính năng sau:

  1. Thêm nhiệm vụ mới
  2. Đánh dấu nhiệm vụ đã hoàn thành
  3. Xóa một nhiệm vụ
  4. Lọc nhiệm vụ (tất cả, đã hoàn thành, chưa hoàn thành)
  5. Lưu nhiệm vụ vào local storage để không bị mất khi tải lại trang
  6. Đếm số nhiệm vụ còn lại
  7. Xóa tất cả nhiệm vụ đã hoàn thành

Cấu trúc dự án

Trước khi bắt đầu viết mã, hãy thiết lập cấu trúc dự án của chúng ta:

todo-app/
├── index.html
├── css/
│   └── style.css
└── js/
    └── app.js

Bước 1: Thiết lập HTML

Tệp index.html sẽ chứa cấu trúc cơ bản của ứng dụng:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Todo List</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Todo List</h1>
            <form id="todo-form">
                <input type="text" id="todo-input" placeholder="Add a new task..." autocomplete="off">
                <button type="submit">
                    <i class="fas fa-plus"></i>
                </button>
            </form>
        </header>

        <div class="todo-filter">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="active">Active</button>
            <button class="filter-btn" data-filter="completed">Completed</button>
        </div>

        <div class="todo-container">
            <ul class="todo-list">
                <!-- Todo items will be added here -->
            </ul>
        </div>

        <div class="todo-info">
            <span id="items-left">0 items left</span>
            <button id="clear-completed">Clear completed</button>
        </div>
    </div>

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

Bước 2: Thiết kế CSS

File css/style.css sẽ tạo giao diện đẹp mắt cho ứng dụng:

:root {
    --primary-color: #3b82f6;
    --text-color: #333;
    --bg-color: #f9fafb;
    --todo-bg: #fff;
    --todo-border: #e5e7eb;
    --completed-color: #9ca3af;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding: 2rem;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--todo-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

header {
    padding: 1.5rem;
    background-color: var(--primary-color);
    color: white;
}

h1 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
}

#todo-form {
    display: flex;
}

#todo-input {
    flex: 1;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

#todo-form button {
    padding: 0 1rem;
    background-color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    color: var(--primary-color);
}

.todo-filter {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid var(--todo-border);
}

.filter-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 4px;
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.todo-list {
    list-style-type: none;
    padding: 0;
}

.todo-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--todo-border);
    display: flex;
    align-items: center;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: var(--completed-color);
}

.todo-checkbox {
    margin-right: 1rem;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.todo-text {
    flex: 1;
}

.delete-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.3rem;
}

.todo-info {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    color: var(--completed-color);
    font-size: 0.9rem;
}

#clear-completed {
    background: none;
    border: none;
    color: var(--completed-color);
    cursor: pointer;
    font-size: 0.9rem;
}

#clear-completed:hover {
    text-decoration: underline;
}

@media (max-width: 650px) {
    body {
        padding: 1rem;
    }

    .container {
        width: 100%;
    }
}

Bước 3: Thêm tính năng với JavaScript

File js/app.js sẽ chứa tất cả logic và tính năng cho ứng dụng:

// DOM Elements
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.querySelector('.todo-list');
const filterButtons = document.querySelectorAll('.filter-btn');
const itemsLeftSpan = document.getElementById('items-left');
const clearCompletedBtn = document.getElementById('clear-completed');

// Todo list array
let todos = [];
let currentFilter = 'all';

// Load todos from localStorage
function loadTodos() {
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
        todos = JSON.parse(storedTodos);
        renderTodos();
    }
}

// Save todos to localStorage
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// Render todos based on current filter
function renderTodos() {
    todoList.innerHTML = '';

    let filteredTodos = todos;
    if (currentFilter === 'active') {
        filteredTodos = todos.filter(todo => !todo.completed);
    } else if (currentFilter === 'completed') {
        filteredTodos = todos.filter(todo => todo.completed);
    }

    filteredTodos.forEach(todo => {
        const todoItem = document.createElement('li');
        todoItem.classList.add('todo-item');
        if (todo.completed) {
            todoItem.classList.add('completed');
        }

        todoItem.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${todo.text}</span>
            <button class="delete-btn">
                <i class="fas fa-trash-alt"></i>
            </button>
        `;

        const checkbox = todoItem.querySelector('.todo-checkbox');
        checkbox.addEventListener('change', () => {
            toggleTodoCompleted(todo.id);
        });

        const deleteBtn = todoItem.querySelector('.delete-btn');
        deleteBtn.addEventListener('click', () => {
            deleteTodo(todo.id);
        });

        todoList.appendChild(todoItem);
    });

    updateItemsLeft();
}

// Add new todo
function addTodo(text) {
    if (text.trim() === '') return;

    const newTodo = {
        id: Date.now(),
        text: text.trim(),
        completed: false
    };

    todos.push(newTodo);
    saveTodos();
    renderTodos();
    todoInput.value = '';
}

// Toggle todo completed status
function toggleTodoCompleted(id) {
    todos = todos.map(todo => {
        if (todo.id === id) {
            return { ...todo, completed: !todo.completed };
        }
        return todo;
    });

    saveTodos();
    renderTodos();
}

// Delete a todo
function deleteTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
    saveTodos();
    renderTodos();
}

// Update items left counter
function updateItemsLeft() {
    const activeTodos = todos.filter(todo => !todo.completed);
    itemsLeftSpan.textContent = `${activeTodos.length} item${activeTodos.length !== 1 ? 's' : ''} left`;
}

// Clear all completed todos
function clearCompleted() {
    todos = todos.filter(todo => !todo.completed);
    saveTodos();
    renderTodos();
}

// Event listeners
todoForm.addEventListener('submit', (e) => {
    e.preventDefault();
    addTodo(todoInput.value);
});

filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        document.querySelector('.filter-btn.active').classList.remove('active');
        button.classList.add('active');
        currentFilter = button.getAttribute('data-filter');
        renderTodos();
    });
});

clearCompletedBtn.addEventListener('click', clearCompleted);

// Initialize the app
loadTodos();

Giải thích mã

Hãy xem xét một số phần quan trọng trong mã:

Quản lý trạng thái

Chúng ta lưu trữ danh sách nhiệm vụ trong một mảng todos, mỗi nhiệm vụ là một đối tượng với các thuộc tính:

  • id: Định danh duy nhất
  • text: Nội dung nhiệm vụ
  • completed: Trạng thái hoàn thành

Lưu trữ cục bộ

function loadTodos() {
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
        todos = JSON.parse(storedTodos);
        renderTodos();
    }
}

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

Hai hàm này cho phép chúng ta lưu trữ và tải danh sách nhiệm vụ từ localStorage của trình duyệt. Điều này đảm bảo dữ liệu không bị mất khi người dùng tải lại trang.

Tạo và cập nhật nhiệm vụ

function addTodo(text) {
    if (text.trim() === '') return;

    const newTodo = {
        id: Date.now(),
        text: text.trim(),
        completed: false
    };

    todos.push(newTodo);
    saveTodos();
    renderTodos();
    todoInput.value = '';
}

Hàm này tạo một nhiệm vụ mới và thêm vào mảng todos, sau đó lưu và hiển thị danh sách cập nhật.

Hiển thị và lọc nhiệm vụ

function renderTodos() {
    todoList.innerHTML = '';

    let filteredTodos = todos;
    if (currentFilter === 'active') {
        filteredTodos = todos.filter(todo => !todo.completed);
    } else if (currentFilter === 'completed') {
        filteredTodos = todos.filter(todo => todo.completed);
    }

    // Tiếp theo là mã để hiển thị các nhiệm vụ...
}

Hàm này lọc các nhiệm vụ dựa trên bộ lọc hiện tại và hiển thị chúng trên giao diện người dùng.

Kết quả cuối cùng

Sau khi hoàn thành ba bước trên, chúng ta sẽ có một ứng dụng To-Do List đầy đủ chức năng với giao diện đẹp mắt. Ứng dụng này:

  • Cho phép người dùng thêm, hoàn thành và xóa nhiệm vụ
  • Lưu trữ nhiệm vụ của người dùng giữa các lần truy cập
  • Lọc nhiệm vụ theo trạng thái
  • Hiển thị số lượng nhiệm vụ còn lại
  • Cho phép xóa tất cả các nhiệm vụ đã hoàn thành

Mở rộng dự án

Đây chỉ là phiên bản cơ bản của ứng dụng To-Do List. Bạn có thể mở rộng nó với các tính năng như:

  1. Chỉnh sửa nhiệm vụ: Cho phép người dùng chỉnh sửa nội dung nhiệm vụ
  2. Kéo và thả: Cho phép người dùng sắp xếp lại các nhiệm vụ
  3. Thêm ngày đến hạn: Cho phép người dùng thiết lập hạn chót cho các nhiệm vụ
  4. Danh mục: Phân loại nhiệm vụ thành các danh mục khác nhau
  5. Thông báo: Gửi thông báo khi đến hạn thực hiện nhiệm vụ
  6. Đồng bộ hóa: Đồng bộ nhiệm vụ giữa các thiết bị bằng cách sử dụng dịch vụ back-end

Kết luận

Dự án To-Do List có vẻ đơn giản nhưng mang lại rất nhiều giá trị học tập. Nó bao gồm các khái niệm cơ bản về frontend và có thể được sử dụng như là nền tảng để xây dựng các ứng dụng phức tạp hơn.

Việc xây dựng dự án này từ đầu đến cuối giúp bạn hiểu rõ hơn về DOM, sự kiện, lưu trữ cục bộ và các khái niệm JavaScript quan trọng khác. Đây là một dự án tuyệt vời để thực hành và nâng cao kỹ năng phát triển web của bạn.

Bạn đã thử xây dựng ứng dụng To-Do List của riêng mình chưa? Hãy chia sẻ trải nghiệm và các tính năng thú vị bạn đã thêm vào dự án của mình trong phần bình luận bên dưới!

Trader hiện đại và simple to do list

Trader chuyên nghiệp ngày nay không chỉ đọc biểu đồ mà còn dùng simple to do list để tự động hóa phân tích, kiểm tra chiến lược và quản lý rủi ro. Python giúp biến ý tưởng thành công cụ một cách nhanh chóng.

Bài viết trình bày chi tiết về simple to do list, từ thiết lập môi trường đến ví dụ áp dụng thực tế trong quy trình giao dịch hằng ngày.

Thiết lập môi trường nhanh

# Cài đặt các thư viện cần thiết
pip install pandas numpy matplotlib requests
# kiểm tra phiên bản
import pandas as pd
print(pd.__version__)

Sau khi cài đặt, bạn có thể bắt đầu nạp dữ liệu giá, tính chỉ báo và vẽ biểu đồ. Quy trình lặp nhanh giúp bạn thử nghiệm nhiều ý tưởng trong thời gian ngắn.

Các bài toán thường gặp của trader

Bài toán Mô tả Thư viện
Tải giá Lấy OHLCV từ sàn requests, ccxt
Tính chỉ báo SMA, RSI, MACD pandas, ta-lib
Backtest Mô phỏng chiến lược backtrader, vectorbt
Cảnh báo Thông báo tín hiệu telegram, twilio
Quản lý vốn Tính khối lượng numpy

Ví dụ: tính RSI và phát hiện tín hiệu

def rsi(close, period=14):
    delta = close.diff()
    gain = delta.clip(lower=0).rolling(period).mean()
    loss = (-delta.clip(upper=0)).rolling(period).mean()
    rs = gain / loss
    return 100 - (100 / (1 + rs))
df['rsi'] = rsi(df['close'])
print(df[['close', 'rsi']].tail())

RSI trên 70 cho thấy vùng quá mua, dưới 30 là quá bán. Đây là tín hiệu tham khảo, cần kết hợp thêm xu hướng và khối lượng trước khi vào lệnh.

Sai lầm phổ biến và cách tránh

Sai lầm Vì sao nguy hiểm Cách tránh
Dùng dữ liệu demo thay live Không đúng thực tế Kiểm tra dữ liệu thật
Bỏ qua phí & trượt giá Lợi nhuận ảo Mô phỏng chi phí thực
Overfitting tham số Chiến lược không ổn định Giữ tham số ít, hợp lý
Không kiểm soát rủi ro Cháy tài khoản Đặt stop loss mọi lệnh

Câu hỏi thường gặp về simple to do list

Tôi mới bắt đầu, học simple to do list từ đâu?

Bắt đầu từ việc nạp dữ liệu và tính chỉ báo cơ bản. Làm được hai việc này, bạn đã có nền tảng để xây dựng công cụ của riêng mình.

Có cần giỏi toán không?

Chỉ cần kiến thức thống kê cơ bản. Các thư viện đã đóng gói sẵn hầu hết phép tính, bạn chỉ cần hiểu ý nghĩa để dùng đúng.

Dùng bot tự động có an toàn không?

An toàn khi bạn hiểu rõ logic, quản lý rủi ro tốt và giám sát thường xuyên. Chạy demo trước khi dùng tiền thật.

Kết luận

Simple To Do List giúp trader tiết kiệm thời gian, tăng độ chính xác và giảm căng thẳng. Hãy xây dựng từng bước, kiểm chứng kỹ lưỡng và luôn ưu tiên quản lý rủi ro.

Công cụ và tài nguyên hỗ trợ simple to do list

Để áp dụng simple to do list hiệu quả, bạn cần những công cụ phù hợp. Việc lựa chọn đúng công cụ giúp bạn tiết kiệm thời gian và nâng cao chất lượng công việc.

Loại Công cụ ví dụ Mục đích
Ngôn ngữ lập trình Python, Dart, MQL5 Xây dựng giải pháp
Xử lý dữ liệu pandas, numpy, Excel Làm sạch, phân tích
Trực quan hóa matplotlib, Tableau Hiểu dữ liệu nhanh
Tự động hóa schedule, systemd, Docker Chạy liên tục 24/7
Giao tiếp Telegram, Slack Cảnh báo, cập nhật
Quản lý mã nguồn Git, GitHub Lưu trữ, phối hợp

Khi mới bắt đầu, đừng ôm đồm quá nhiều công cụ. Hãy chọn một bộ tối thiểu và thành thạo chúng trước. Việc thêm công cụ mới chỉ nên diễn ra khi thực sự cần thiết để giải quyết một vấn đề cụ thể.

Cách học công cụ mới nhanh

Học bằng cách làm: chọn một bài toán nhỏ, dùng công cụ để giải quyết, và tìm hiểu tài liệu khi gặp vướng mắc. Phương pháp này giúp kiến thức được gắn với thực tế và nhớ lâu hơn nhiều so với đọc lý thuyết đơn thuần.

Checklist kiểm tra trước khi áp dụng simple to do list

Trước khi triển khai simple to do list, hãy dùng checklist dưới đây để đảm bảo bạn không bỏ sót bước quan trọng nào. Checklist giúp quy trình trở nên nhất quán và giảm thiểu sai sót.

# Hạng mục Trạng thái
1 Mục tiêu rõ ràng, đo lường được [ ]
2 Dữ liệu / thông tin đầu vào đầy đủ [ ]
3 Công cụ và môi trường sẵn sàng [ ]
4 Quy trình từng bước được xác định [ ]
5 Kế hoạch kiểm tra kết quả [ ]
6 Phương án xử lý rủi ro [ ]
7 Ghi chép và lưu trữ kết quả [ ]

Hãy hoàn thành từng mục trước khi chuyển sang bước thực hiện chính. Nếu bất kỳ mục nào chưa sẵn sàng, hãy dành thời gian xử lý trước thay vì lao vào làm vội. Chuẩn bị kỹ lưỡng giúp bạn tránh những sửa chữa tốn kém về sau.

Sau khi hoàn thành

Sau khi triển khai, hãy quay lại kiểm tra từng mục và ghi chú kết quả. Những ghi chú này là tài liệu tham khảo quý giá cho lần triển khai tiếp theo, giúp bạn rút ngắn thời gian và nâng cao chất lượng dần theo thời gian.

Case study điển hình về simple to do list

Để thấy rõ giá trị thực tế của simple to do list, chúng ta xem xét một case study điển hình. Một người mới bắt đầu với ít kinh nghiệm, sau khi áp dụng có hệ thống đã đạt được kết quả rõ rệt trong một khoảng thời gian nhất định.

Ban đầu, họ dành thời gian học khái niệm và xây dựng phiên bản tối giản. Thay vì tìm kiếm giải pháp hoàn hảo, họ tập trung vào việc hoàn thành từng bước nhỏ và đo lường kết quả. Cách tiếp cận này giúp họ duy trì động lực và cải thiện liên tục.

Mốc thời gian Hành động Kết quả
Tháng 1 Học cơ bản, chuẩn bị công cụ Nắm nền tảng
Tháng 2 Xây dựng phiên bản đầu tiên Có sản phẩm chạy được
Tháng 3 Kiểm thử và tối ưu Kết quả cải thiện
Tháng 4 Mở rộng và tự động hóa Tiết kiệm thời gian đáng kể
Tháng 6 Vận hành ổn định Kết quả nhất quán, dài hạn

Bài học rút ra từ case study

Bài học quan trọng nhất là sự kiên trì và làm có hệ thống. Không có bước nhảy thần kỳ nào, chỉ có sự tích lũy đều đặn. Bạn cũng nên sẵn sàng điều chỉnh khi dữ liệu cho thấy cần thay đổi, thay vì cố chấp giữ nguyên kế hoạch cũ.

Xu hướng và tương lai của simple to do list

Lĩnh vực liên quan đến simple to do list đang phát triển rất nhanh. Hiểu được xu hướng giúp bạn chuẩn bị tốt hơn và nắm bắt cơ hội trước khi chúng trở nên phổ biến.

Một xu hướng rõ ràng là sự tự động hóa ngày càng sâu. Những công việc từng đòi hỏi thao tác thủ công đang dần được thay thế bằng các quy trình tự động, giúp con người tập trung vào quyết định chiến lược.

Xu hướng thứ hai là vai trò ngày càng lớn của dữ liệu và trí tuệ nhân tạo. Việc ra quyết định dựa trên dữ liệu khách quan đang trở thành chuẩn mực, thay vì dựa vào cảm tính.

Xu hướng Tác động Cơ hội
Tự động hóa Giảm công việc thủ công Xây dựng hệ thống 24/7
Dữ liệu lớn Quyết định chính xác hơn Phân tích sâu hơn
AI / Machine Learning Tự học và thích nghi Mô hình thông minh hơn
Đa nền tảng Phủ rộng người dùng Ứng dụng linh hoạt
Bảo mật An toàn hơn Niềm tin của người dùng

Chuẩn bị cho tương lai

Để không bị tụt lại, hãy xây dựng nền tảng vững chắc về kiến thức cốt lõi và không ngừng học hỏi công nghệ mới. Kỹ năng học cách học chính là lợi thế cạnh tranh bền vững nhất trong thời đại thay đổi nhanh.

Đặng Trí Thanh

Đặng Trí Thanh

Giám đốc Công nghệ · DNT Digital · Giảng viên HNDL
852 Bài viết
15.4k Người theo dõi
120k+ Lượt đọc

Đặng Trí Thanh — Founder & CTO · Hướng Nghiệp Dữ Liệu - DNT Digital. Chuyên đào tạo và triển khai thực chiến Python, MT5 và hệ thống bot auto trading / IB cho học viên và doanh nghiệp.

Liên hệ Zalo