Проект: доска задач — разметка и план

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Доска задач — это три колонки и карточки, которые между ними ездят. Звучит несерьёзно, но именно на таком размере впервые становится больно от бардака: если писать «как пойдёт», через полчаса код превращается в клубок обработчиков, и каждый чинит страницу по-своему.

Поэтому сначала договоримся о границах. Вот всё, что доска должна уметь, и способ проверить каждый пункт руками:

Умеет	Как проверяем
Показывает три колонки: «Сделать», «В работе», «Готово»	В каждой колонке — свой список карточек
Добавляет задачу из формы	После отправки карточка появляется в «Сделать», поле пустое
Двигает карточку дальше по колонкам	Клик по кнопке меняет статус, карточка переезжает
Удаляет карточку	Клик по крестику убирает её со страницы
Помнит список после перезагрузки	Данные лежат в `localStorage`

Не менее важно, чего в проекте не будет: сервера, авторизации, перетаскивания мышью и анимаций. Карточка переезжает кнопкой — этого хватает, чтобы разобрать события и состояние, а drag-and-drop добавим потом, как надстройку над работающей основой.

Разметка здесь не про внешность, а про договор между HTML и кодом. Классы (column, card) — зацепки для CSS, а смысл живёт в data-атрибутах: data-status у колонки говорит, чьи карточки в ней лежат, data-id у карточки — какой задаче она соответствует. По этим двум атрибутам страница и состояние потом находят друг друга.

js

const columns = document.querySelectorAll("#board .column");
console.log(columns.length);

const statuses = [...columns].map((column) => column.dataset.status);
console.log(statuses.join(","));

const doing = document.querySelector("#board [data-status=doing] .stack");
console.log(doing.tagName);
console.log(doing.children.length);

страница примера

Сначала предположите, что выведет код

Карточки не будем склеивать из строк. В HTML есть <template> — кусок разметки, который браузер разбирает, но не показывает и не оживляет. Готовый фрагмент лежит в свойстве content; его клонируют и заполняют. Разметка карточки остаётся в HTML, где ей и место, а в коде — только подстановка значений. Клонируют обязательно через cloneNode(true), а не вставляют сам content: почему, разобрано в статье «DocumentFragment и производительность».

js

const tpl = document.querySelector("#card-tpl");
const stack = document.querySelector("#stack");

function renderCard(task) {
  const node = tpl.content.firstElementChild.cloneNode(true);
  node.dataset.id = task.id;
  node.querySelector(".card-title").textContent = task.title;
  return node;
}

stack.append(renderCard({ id: "t1", title: "Сверстать доску" }));
stack.append(renderCard({ id: "t2", title: "Написать рендер" }));

console.log(stack.children.length);
console.log(stack.firstElementChild.dataset.id);
console.log(stack.lastElementChild.querySelector(".card-title").textContent);

страница примера

Сначала предположите, что выведет код

Сверстайте руками одну колонку с двумя карточками и посмотрите на неё глазами. И только потом стирайте карточки и отдавайте это место рендеру. Разметка, которую ни разу не видели заполненной, почти всегда оказывается неудобной.

Состояние — это то, что можно выписать на бумажку и по одной этой бумажке восстановить всю страницу. Доске хватает двух вещей: списка колонок (он не меняется) и массива задач, у каждой — id, текст и status.

Массив именно плоский, и это выбор, а не лень. Если раскладывать задачи по колонкам во вложенные списки, переезд карточки — «удалить здесь, вставить туда»: две операции, которые легко рассинхронизировать. В плоском виде переезд — смена одного поля.

js

const state = {
  columns: [
    { id: "todo", title: "Сделать" },
    { id: "doing", title: "В работе" },
    { id: "done", title: "Готово" }
  ],
  tasks: [
    { id: "t1", title: "Сверстать доску", status: "todo" },
    { id: "t2", title: "Написать рендер", status: "doing" },
    { id: "t3", title: "Прочитать главу", status: "todo" }
  ]
};

const byStatus = (status) => state.tasks.filter((task) => task.status === status);

console.log(byStatus("todo").length);
console.log(byStatus("done").length);

// переезд карточки — новое состояние, а не правка на месте
state.tasks = state.tasks.map((task) =>
  task.id === "t3" ? { ...task, status: "done" } : task
);

console.log(byStatus("todo").length);
console.log(state.tasks.at(-1).status);

Сначала предположите, что выведет код

Идентификатор нужен раньше, чем карточка попадёт на страницу: по нему обработчик найдёт задачу в массиве. В проекте возьмём встроенный crypto.randomUUID(). В примерах он не годится — результат каждый раз новый, а нам нужен предсказуемый вывод, поэтому здесь id выдаёт счётчик.

js

let seq = 0;
const nextId = () => `t${++seq}`;

console.log(nextId());
console.log(nextId());
console.log(typeof nextId());

Сначала предположите, что выведет код

Первым пишется рендер, и он не знает ни про клики, ни про сохранение. На входе — состояние, на выходе — страница: render() проходит по колонкам, отбирает задачи с нужным статусом и складывает их в список. Данные пока подставляем руками — этого достаточно, чтобы увидеть доску и понять, удобна ли разметка.

js

const tasks = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "todo" },
  { id: "t3", title: "Прочитать главу", status: "done" }
];

function render() {
  for (const stack of document.querySelectorAll("#board .stack")) {
    const cards = tasks
      .filter((task) => task.status === stack.dataset.status)
      .map((task) => {
        const li = document.createElement("li");
        li.dataset.id = task.id;
        li.textContent = task.title;
        return li;
      });
    stack.replaceChildren(...cards);
  }
}

render();
console.log(document.querySelectorAll("[data-status=todo] li").length);

render();
console.log(document.querySelectorAll("#board li").length);

страница примера

Сначала предположите, что выведет код

разбор вывода
Второй вызов не удвоил карточки: три, а не шесть. replaceChildren сначала выбрасывает старых детей контейнера, потом вставляет новых, поэтому такой рендер можно звать сколько угодно раз с одним и тем же итогом. С append карточки накапливались бы при каждом вызове.

Дальше вся логика сведётся к «поменяли состояние — позвали render()»: страницу руками не правит никто.

Соблазн понятный: карточка ведь уже на экране, зачем дублировать её текст в массиве? Затем, что обратно из DOM всё возвращается строками и вперемешку с версткой — служебные значения слипаются с заголовком, и разбирать это приходится вручную.

js

const li = document.querySelector("#stack li");

console.log(JSON.stringify(li.textContent.trim()));
console.log(Number(li.textContent));
console.log(Number(li.querySelector(".count").textContent));
console.log(li.dataset.id);

страница примера

Сначала предположите, что выведет код

В массиве число остаётся числом, а строка — строкой. Страница — только отражение состояния, и читать её обратно незачем.

Обработчики появляются только после того, как доска рисуется. Правило одно: событие меняет состояние и зовёт render() — руками страницу не правит никто, иначе через десяток кликов массив и экран разойдутся, и не будет способа понять, кто из них соврал. Слушателя при этом вешаем не на каждую кнопку, а на список: карточки приходят и уходят, а список остаётся, и event.target.closest(...) внутри отвечает, по чему именно кликнули.

js

const stack = document.querySelector("#stack");
const removed = [];

// один слушатель на список: кнопки будут появляться и исчезать
stack.addEventListener("click", (event) => {
  const button = event.target.closest(".del");
  if (!button) return;
  const card = button.closest("li");
  removed.push(card.dataset.id);
  card.remove();
});

stack.querySelector("[data-id=t2] .del").click();

console.log(removed.join(","));
console.log(stack.children.length);
console.log(stack.firstElementChild.dataset.id);

страница примера

Сначала предположите, что выведет код

Хранение — последний и самый тонкий слой. Состояние у нас из обычных объектов и массивов, значит, оно превращается в строку через JSON.stringify и восстанавливается через JSON.parse. В проекте хранилищем будет localStorage; в примере ниже вместо него подставлен самодельный объект с теми же getItem и setItem — код от такой замены не меняется ни на строку.

js

const store = {
  data: new Map(),
  getItem(key) { return this.data.has(key) ? this.data.get(key) : null; },
  setItem(key, value) { this.data.set(key, String(value)); }
};

const state = { tasks: [{ id: "t1", title: "Сверстать доску", status: "todo" }] };

const save = (target) => target.setItem("board", JSON.stringify(state));
const load = (target) => JSON.parse(target.getItem("board") ?? JSON.stringify({ tasks: [] }));

console.log(load(store).tasks.length);
save(store);
console.log(load(store).tasks.length);
console.log(load(store).tasks[0].title);
console.log(load(store) === state);

Сначала предположите, что выведет код

Порядок «рендер, события, хранение» выбран не по вкусу. Начав с событий, вы отлаживаете сразу две несуществующие вещи; начав с хранения — сохраняете то, чего ещё нет. А если рендер уже честно рисует состояние, каждый следующий шаг проверяется одним взглядом на доску.

Границы проекта заданы заранее: три колонки, добавление, переезд и удаление карточки, память после перезагрузки. Сервера, авторизации и drag-and-drop в нём нет.
Разметка хранит смысл в data-атрибутах: data-status у колонки и data-id у карточки — по ним страница и состояние находят друг друга, а сама карточка живёт в <template>.
Состояние — плоский массив задач с полем status; переезд карточки сводится к смене одного поля, а не к паре операций над двумя списками.
render() перерисовывает колонку целиком через replaceChildren, поэтому его безопасно звать сколько угодно раз подряд.
Порядок работы: сначала рендер по руками собранным данным, потом события (меняют состояние и зовут рендер), потом хранение — тонкий слой JSON.stringify и JSON.parse поверх состояния.

1/3Зачем карточке в разметке атрибут data-id?

2/3Функцию render() позвали дважды подряд — почему карточки не удвоились?

3/3Слушатель клика висит на списке, а не на каждой кнопке. Что это даёт?

Переезд карточки без порчи исходника

Напишите функцию move(list, id, status): она возвращает новый массив задач, в котором у задачи с нужным id заменён статус. Исходный массив трогать нельзя — на этом свойстве держится вся дальнейшая логика доски.

js

const tasks = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "doing" }
];

function move(list, id, status) {
  return list; // ваш код
}

const next = move(tasks, "t1", "done");

console.log(next.find((task) => task.id === "t1").status); // сейчас todo, должно стать done
console.log(tasks.find((task) => task.id === "t1").status); // todo — исходный массив не меняется
console.log(next === tasks); // сейчас true, должно стать false

Сначала предположите, что выведет код

Достаточно map: он собирает новый массив, а нужную задачу подменяет её копией со свежим статусом. Остальные объекты переезжают в новый массив как есть — их копировать незачем.

jsлистинг · не запускается

function move(list, id, status) {
  return list.map((task) => (task.id === id ? { ...task, status } : task));
}

function move(list, id, status) {
  return list.map((task) => (task.id === id ? { ...task, status } : task));
}

После этого проверки печатают done, todo и false: карточка переехала, старый массив цел, а next — уже другой объект. Именно это и позволяет рендеру каждый раз рисовать состояние заново, не гадая, что в нём изменилось.

Счётчик карточек в заголовке колонки

В заголовке каждой колонки есть <span class="count">. Напишите updateCounts(), которая проставит туда число задач этой колонки. Условие: считать нужно по массиву tasks, а не по карточкам на странице.

js

const tasks = [
  { id: "t1", title: "Сверстать доску", status: "todo" },
  { id: "t2", title: "Написать рендер", status: "todo" },
  { id: "t3", title: "Прочитать главу", status: "done" }
];

function updateCounts() {
  // ваш код
}

updateCounts();

console.log(document.querySelector("[data-status=todo] .count").textContent); // сейчас 0, должно стать 2
console.log(document.querySelector("[data-status=done] .count").textContent); // сейчас 0, должно стать 1

страница примера

Сначала предположите, что выведет код

Идём по колонкам, у каждой спрашиваем её data-status и считаем задачи с таким статусом:

jsлистинг · не запускается

function updateCounts() {
  for (const column of document.querySelectorAll("#board .column")) {
    const count = tasks.filter((task) => task.status === column.dataset.status).length;
    column.querySelector(".count").textContent = String(count);
  }
}

function updateCounts() {
  for (const column of document.querySelectorAll("#board .column")) {
    const count = tasks.filter((task) => task.status === column.dataset.status).length;
    column.querySelector(".count").textContent = String(count);
  }
}

Функция ни разу не спрашивает у страницы, сколько там карточек. Поэтому её можно звать хоть до рендера, хоть после — цифры всегда сойдутся с состоянием.

Проект: доска задач — разметка и план

Видеоразбор темы за 5–7 минут

Что мы строимГраницы проекта и список требований

Разметка колонок и карточекСмысл в data-атрибутах, карточка из template

Структура состоянияПлоский массив задач как источник правды

Шаг 1: рендер из состоянияСостояние на входе, DOM на выходе

Шаги 2 и 3: события и хранениеСобытие меняет состояние, JSON хранит его

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Переезд карточки без порчи исходника

Счётчик карточек в заголовке колонки