Simple To-Do List project

May 15, 2024 · 9 min read

admin

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:

Thêm nhiệm vụ mới
Đánh dấu nhiệm vụ đã hoàn thành
Xóa một nhiệm vụ
Lọc nhiệm vụ (tất cả, đã hoàn thành, chưa hoàn thành)
Lưu nhiệm vụ vào local storage để không bị mất khi tải lại trang
Đếm số nhiệm vụ còn lại
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ư:

Chỉnh sửa nhiệm vụ: Cho phép người dùng chỉnh sửa nội dung nhiệm vụ
Kéo và thả: Cho phép người dùng sắp xếp lại các nhiệm vụ
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ụ
Danh mục: Phân loại nhiệm vụ thành các danh mục khác nhau
Thông báo: Gửi thông báo khi đến hạn thực hiện nhiệm vụ
Đồ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!

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

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

Cấu trúc dự án​

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

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

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

Giải thích mã​

Quản lý trạng thái​

Lưu trữ cục bộ​

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

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

Kết quả cuối cùng​

Mở rộng dự án​

Kết luận​