BÀI 14: THỰC HÀNH DỰ ÁN WEB HOÀN CHỈNH

I. Mục tiêu bài học

Tổng hợp kiến thức HTML, CSS, JavaScript đã học
Xây dựng một website quản lý nội dung đơn giản
Rèn tư duy tổ chức mã nguồn và dữ liệu

II. Mô tả dự án

Xây dựng Website Quản lý danh sách công việc với các chức năng:

Thêm công việc mới
Hiển thị danh sách
Đánh dấu hoàn thành
Lưu dữ liệu bằng localStorage

III. Cấu trúc thư mục đề xuất

project/
│── index.html
│── style.css
│── script.js

IV. Mẫu HTML (index.html)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Quản lý công việc</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Danh sách công việc</h1>

    <input type="text" id="taskInput" placeholder="Nhập công việc...">
    <button onclick="addTask()">Thêm</button>

    <ul id="taskList"></ul>

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

V. Gợi ý JavaScript (script.js)

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

function render(){
    const ul = document.getElementById("taskList");
    ul.innerHTML = "";
    tasks.forEach((t,i)=>{
        const li = document.createElement("li");
        li.textContent = t;
        ul.appendChild(li);
    });
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

function addTask(){
    const input = document.getElementById("taskInput");
    if(input.value.trim() !== ""){
        tasks.push(input.value);
        input.value = "";
        render();
    }
}

render();

VI. Yêu cầu tự hoàn thiện

Bổ sung CSS cho giao diện đẹp hơn
Thêm nút xóa công việc
Thêm trạng thái hoàn thành

VII. Kết luận

Bài 14 là bước chuyển từ học từng kỹ thuật sang vận dụng tổng hợp. Hoàn thành tốt bài này đồng nghĩa đồng chí đã nắm vững nền tảng lập trình web căn bản.