Dự án: app web nhỏ

mô hình dữ liệu

// Mot viec la mot object:
const task = { id: 1, text: "Hoc JS", done: false };

// Ca app la mot MANG cac viec:
let tasks = [];

store.js - không có DOM ở đây

function addTask(tasks, text) {
  const id = tasks.reduce((m, t) => Math.max(m, t.id), 0) + 1;
  return [...tasks, { id, text, done: false }];     // mang MOI
}

function toggleTask(tasks, id) {
  return tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
}

function deleteTask(tasks, id) {
  return tasks.filter((t) => t.id !== id);
}

function stats(tasks) {
  const done = tasks.reduce((n, t) => n + (t.done ? 1 : 0), 0);
  return { total: tasks.length, done, active: tasks.length - done };
}

ui.js - vẽ từ dữ liệu

const ul = document.querySelector("#ds");

function render(tasks) {
  ul.innerHTML = "";                       // xoa danh sach cu
  for (const t of tasks) {
    const li = document.createElement("li");
    li.dataset.id = t.id;                  // nho id de xu ly su kien
    li.textContent = (t.done ? "✓ " : "") + t.text;   // an toan

    const nut = document.createElement("button");
    nut.className = "xoa";                 // main.js nhan ra qua .matches(".xoa")
    nut.dataset.id = t.id;
    nut.textContent = "×";
    li.append(" ", nut);

    ul.append(li);
  }
}

main.js - điều phối

form.addEventListener("submit", (e) => {
  e.preventDefault();                 // khong reload trang
  tasks = addTask(tasks, input.value);
  input.value = "";
  render(tasks);
});

// Mot listener cho ca danh sach (event delegation):
ul.addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".xoa")) tasks = deleteTask(tasks, id);
  else tasks = toggleTask(tasks, id);
  render(tasks);
});

lưu & nạp

function luu(tasks) {
  localStorage.setItem("tasks", JSON.stringify(tasks));   // object -> chuoi
}
function nap() {
  return JSON.parse(localStorage.getItem("tasks") || "[]"); // chuoi -> object
}
// goi luu(tasks) sau moi thay doi; tasks = nap() luc khoi dong.

// Dong bo voi SERVER (tuy chon) - fetch (Bai 10) + async/await (Bai 8):
// (jsonplaceholder: API gia-lap mien phi, chay that - doi sang server cua ban sau)
async function taiTuServer() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  return res.json();
}

ba file, đúng ranh giới lõi-UI

// store.js - loi (khong dung DOM)
export { addTask, toggleTask, deleteTask, stats };

// ui.js - render DOM
export function render(tasks) { /* ... ve danh sach ... */ }

// main.js - dieu phoi: gan su kien, goi store + ui
import { addTask, toggleTask } from "./store.js";
import { render } from "./ui.js";