Мини-проект: трекер задач или привычек

01 Задание: выберите вариант

Проект собирается из того, что вы уже делали на уроках 8–11: список на DOM, события, форма, состояние в одном объекте и сохранение. Сегодня мы доводим всё до рабочего приложения, проверяем друг друга и защищаем. Выберите один из двух вариантов — оценивать будем по одним и тем же критериям.

Варианты по сложности почти равны: у привычек сложнее логика (даты и серия), у задач — больше режимов отображения (фильтры). Если вы только начали уверенно писать код — берите задачи. Хотите вызов — привычки. Свою идею можно предложить, но только если она по объёму такая же и вы согласовали её с преподавателем до начала работы.

Что вы показываете в конце

1. Работающее приложение — открывается в браузере без ошибок в консоли.
2. Репозиторий на GitHub с кодом и README (что это, как запустить, скриншот).
3. Защита на 5 минут — демонстрация, объяснение кода и ответы на вопросы.

02 Требования: MVP и бонусы

MVP (minimum viable product) — минимальная версия, которая уже полезна и работает от начала до конца. Сначала делаем её полностью, и только потом тратим время на украшения. Проект без MVP не получит высокой оценки, сколько бы бонусов в нём ни было.

MVP — обязательно для обоих вариантов

Бонусы — после MVP

• Редактирование: двойной клик по тексту превращает его в поле ввода (Enter — сохранить, Esc — отменить).
• Кнопка «Очистить выполненные» с подтверждением.
• Поиск по списку в реальном времени (событие input).
• Приоритеты или категории с цветными метками.
• Тёмная тема с сохранением выбора.
• Сортировка: по алфавиту, по дате добавления.
• Для привычек: неделя в виде 7 точек с отметками по дням и «лучшая серия».

03 Как оценивается проект (0–100)

Мини-проект оценивается по шкале 0–100, как и записано в правилах курса. Оценка складывается из семи критериев:

Бонусы добавляют до +5 баллов, но итог не может быть больше 100. То есть бонусы могут компенсировать мелкие потери в основных критериях.

Что снимает баллы

• Не можете объяснить свой код — теряете баллы в том критерии, к которому относится непонятная часть (правило курса №2 и №3).
• Не сдано в срок — до −10 баллов, по договорённости с преподавателем.
• Код целиком скопирован у другого студента или из чата без понимания — 0 за проект. Помогать друг другу можно и нужно, но каждый пишет и понимает своё.

Как это влияет на итоговую оценку курса

Пример: за мини-проект 1 вы получили 82, за мини-проект 2 — 90. Среднее — 86, и в итог курса идёт 86 × 25% = 21.5 балла. Для сертификата нужно сдать оба мини-проекта.

04 Декомпозиция: разбиваем проект вместе с ИИ

Главная ошибка новичка перед большим проектом — сесть и начать писать «всё сразу». Через час код превращается в кашу, непонятно, что уже работает, и хочется всё бросить. Профессионалы делают иначе: сначала разбивают задачу на маленькие шаги, оценивают время каждого и идут по порядку. Это называется декомпозицией.

Первый промпт даст общие слова и, возможно, сразу весь код, который вы не сможете объяснить. Второй даст план, с которым можно работать. Но это только черновик. Посмотрите на пример результата после вашей правки:

Пример плана для варианта А (6 часов суммарно)

Что вы делаете с ответом ИИ — по шагам

1. Вычеркните лишнее. Если ИИ предложил «настроить Webpack» или «подключить React» — это не про наш проект. Мы на чистом JS.
2. Проверьте порядок. Нельзя делать «сохранение» раньше «состояния»: сначала нужно знать, что сохранять. Каждый шаг должен опираться на готовые предыдущие.
3. Оцените время сами. ИИ не знает, сколько времени уйдёт у вас. Умножайте его оценку на 1.5, пока нет опыта. Любой шаг длиннее 40 минут — разбейте ещё.
4. Каждый шаг должен давать видимый результат. «Подумать над архитектурой» — не шаг. «Функция addTask проходит проверку в консоли» — шаг.
5. Отделите MVP от бонусов. Бонусы выполняем, только когда всё из MVP работает.
6. Запишите план в файл PLAN.md или комментарий — и отмечайте выполненное. Каждая галочка — видимый прогресс, а он держит мотивацию.

const plan = [
  { title: "Разметка страницы", min: 20 },
  { title: "Объект состояния", min: 25 },
  { title: "Функция render", min: 40 },
  { title: "Форма добавления", min: 30 },
  { title: "Отметка выполненных", min: 25 },
  { title: "Сохранение в localStorage", min: 35 },
];

// посчитайте сумму минут и выведите итоговую строку

Всего: 175 мин = 2.9 ч

const plan = [
  { title: "Разметка", min: 20 },
  { title: "Фильтры и счётчики", min: 90 },
  { title: "Форма", min: 30 },
  { title: "Сохранение и загрузка", min: 60 },
  { title: "Стили", min: 25 },
];

// найдите шаги длиннее 40 минут

Разбить: Фильтры и счётчики (90 мин)
Разбить: Сохранение и загрузка (60 мин)
Нужно разделить: 2

const plan = [
  { title: "Разметка", min: 20, bonus: false },
  { title: "Функция render", min: 40, bonus: false },
  { title: "Форма добавления", min: 30, bonus: false },
  { title: "Сохранение", min: 50, bonus: false },
  { title: "Тёмная тема", min: 25, bonus: true },
  { title: "Поиск по задачам", min: 30, bonus: true },
];

// const sumMin = (list) => ...
// console.log(`MVP: ... мин`);
// console.log(`Бонус: ... мин`);

MVP: 140 мин
Бонус: 55 мин

05 Разминка 1. Состояние — сердце трекера

План есть, переходим к коду. Начинаем с главного — состояния (урок 11). Всё, что приложение «знает», лежит в одном объекте: список задач, выбранный фильтр, следующий номер. Страница — это лишь картинка этого объекта.

const state = {
  tasks: [
    { id: 1, title: "Купить лепёшки", done: false },
    { id: 2, title: "Сделать ДЗ", done: true },
  ],
  filter: "all",   // "all" | "active" | "done"
  nextId: 3,       // какой id получит следующая задача
};

console.log(state.tasks.length);
console.log(state);

Зачем отдельное поле nextId? Если брать tasks.length + 1, то после удаления задачи номера начнут повторяться. Об этом мы ещё поговорим на ревью. А сейчас — главное правило: функции над состоянием не трогают старый объект, а возвращают новый.

function addTask(state, title) {
  return {
    ...state,                                                    // копируем всё остальное
    tasks: [...state.tasks, { id: state.nextId, title, done: false }],  // новый массив
    nextId: state.nextId + 1,
  };
}

const s1 = { tasks: [], filter: "all", nextId: 1 };
const s2 = addTask(s1, "Плов");

console.log(s1.tasks.length, s2.tasks.length);  // 0 1 — старое состояние не изменилось

Читать подробнее: learn.javascript.ru — методы массивов · MDN — оператор расширения (spread)

const state = {
  tasks: [{ id: 1, title: "Купить лепёшки", done: false }],
  filter: "all",
};
state.tasks.push({ id: 2, title: "Сделать ДЗ", done: true });
state.filter = "done";
// добавьте здесь третью задачу

console.log(state.tasks.length);
console.log(state.tasks[1].title);
console.log(state.filter);
console.log(state.tasks.filter((t) => t.done).length);

3
Сделать ДЗ
done
2

// function createState() { ... }

const a = createState();
const b = createState();
a.tasks.push({ id: 1, title: "тест", done: false });
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

{"tasks":[{"id":1,"title":"тест","done":false}],"filter":"all","nextId":1}
{"tasks":[],"filter":"all","nextId":1}

const createState = () => ({ tasks: [], filter: "all", nextId: 1 });

// function addTask(state, title) { ... }

let s = createState();
s = addTask(s, "  Купить лепёшки  ");
s = addTask(s, "   ");
s = addTask(s, "Сделать ДЗ");
console.log(s.tasks.map((t) => `${t.id}:${t.title}`).join(" | "));
console.log(s.nextId);

const before = s;
const after = addTask(s, "Позвонить маме");
console.log(before.tasks.length, after.tasks.length);

1:Купить лепёшки | 2:Сделать ДЗ
3
2 3

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

const show = (s) => s.tasks.map((t) => t.id + (t.done ? "✓" : "✗")).join(" ");
const s1 = {
  tasks: [
    { id: 1, title: "Плов", done: false },
    { id: 2, title: "Чой", done: false },
    { id: 3, title: "Самбуса", done: true },
  ],
};
const s2 = toggleTask(s1, 2);
console.log("до:", show(s1));
console.log("после:", show(s2));

до: 1✗ 2✗ 3✓
после: 1✗ 2✓ 3✓

const s = {
  tasks: [
    { id: 1, title: "Плов", done: true },
    { id: 2, title: "Чой", done: false },
    { id: 3, title: "Самбуса", done: true },
    { id: 4, title: "Курутоб", done: false },
  ],
};

// removeTask, clearDone, getStats

const ids = (st) => st.tasks.map((t) => t.id).join(" ");
console.log(ids(removeTask(s, 2)));
console.log(ids(clearDone(s)));
const st = getStats(s);
console.log(`Всего: ${st.total}, сделано: ${st.done}, осталось: ${st.left}`);
console.log(s.tasks.length);

1 3 4
2 4
Всего: 4, сделано: 2, осталось: 2
4

06 Разминка 2. Функция render

Состояние само по себе на экране не видно. Нужна функция, которая берёт состояние и рисует его в DOM. Правило этой функции простое: очистить список и построить его заново из состояния. Не искать, какой элемент поменялся, не править по одному — всё с нуля. Для маленького трекера это быстро и надёжно.

Каждый блок кода на этой странице работает на собственной пустой «странице», в которой есть document. Поэтому мы можем создавать элементы через document.createElement и выводить в консоль то, что хотим проверить.

function createTaskItem(task) {
  const li = document.createElement("li");
  li.textContent = task.title;
  if (task.done) li.classList.add("done");
  return li;
}

function render(state, list) {
  list.innerHTML = "";                                   // 1. очистили
  state.tasks.forEach((task) => list.append(createTaskItem(task)));  // 2. построили заново
}

const list = document.createElement("ul");
render({ tasks: [{ title: "Плов" }, { title: "Чой" }] }, list);
render({ tasks: [{ title: "Плов" }, { title: "Чой" }] }, list);   // второй раз: дублей нет

console.log(list.children.length);   // 2, а не 4

function render(tasks, list) {
  tasks.forEach((title) => {
    const li = document.createElement("li");
    li.textContent = title;
    list.append(li);
  });
}

const list = document.createElement("ul");
render(["Плов", "Чой"], list);
render(["Плов", "Чой"], list);
console.log(list.children.length);   // 4 — дубли!

Читать подробнее: learn.javascript.ru — изменение документа · MDN — textContent

// function createTaskItem(task) { ... }

const li1 = createTaskItem({ id: 7, title: "Купить лепёшки", done: false });
const li2 = createTaskItem({ id: 8, title: "Сделать ДЗ", done: true });
console.log(li1.tagName, li1.className, li1.dataset.id, li1.textContent);
console.log(li2.className);

LI task 7 Купить лепёшки
task done

function createTaskItem(task) {
  const li = document.createElement("li");
  li.textContent = task.title;
  return li;
}

// function render(state, list) { ... }

const list = document.createElement("ul");
const titles = () => [...list.children].map((li) => li.textContent).join(", ");

render({ tasks: [{ title: "Плов" }, { title: "Чой" }, { title: "Самбуса" }] }, list);
console.log(list.children.length, titles());
render({ tasks: [{ title: "Чой" }, { title: "Самбуса" }] }, list);
console.log(list.children.length, titles());

3 Плов, Чой, Самбуса
2 Чой, Самбуса

function createTaskItem(task) {
  const li = document.createElement("li");
  li.className = "task";
  li.textContent = task.title;
  return li;
}

function render(state, list) {
  list.innerHTML = "";
  // если задач нет — покажите сообщение и выйдите
  state.tasks.forEach((task) => list.append(createTaskItem(task)));
}

const list = document.createElement("ul");
const info = () =>
  `${list.children.length} ${list.firstElementChild.className} ${list.firstElementChild.textContent}`;

render({ tasks: [] }, list);
console.log(info());
render({ tasks: [{ title: "Купить хлеб" }] }, list);
console.log(info());
render({ tasks: [] }, list);
console.log(info());

1 empty Пока нет задач. Добавьте первую!
1 task Купить хлеб
1 empty Пока нет задач. Добавьте первую!

function createTaskItem(task) {
  const li = document.createElement("li");
  li.innerHTML = task.title;
  return li;
}

const li = createTaskItem({ title: "<b>срочно!</b>" });
console.log(li.children.length);     // сколько вложенных элементов?
console.log(li.textContent);
console.log(li.querySelector("b"));  // должно быть null

0
<b>срочно!</b>
null

07 Разминка 3. Форма, клик и делегирование

Состояние есть, отрисовка есть. Осталось оживить интерфейс: поймать отправку формы и клики по задачам. В проекте будет ровно два важных обработчика: submit на форме и click на списке.

Форма: submit + preventDefault + валидация

const form = document.createElement("form");
form.innerHTML = '<input name="title"><button>Добавить</button>';
const input = form.querySelector("input");

form.addEventListener("submit", (event) => {
  event.preventDefault();               // не даём браузеру перезагрузить страницу
  const title = input.value.trim();
  if (!title) {
    console.log("Введите название");    // в проекте — сообщение под полем
    return;
  }
  console.log("Добавляем:", title);
  input.value = "";
});

input.value = "   ";
form.dispatchEvent(new Event("submit", { cancelable: true }));  // имитируем нажатие
input.value = "Купить хлеб";
form.dispatchEvent(new Event("submit", { cancelable: true }));

Событие submit срабатывает и при клике на кнопку, и при нажатии Enter в поле: отдельно слушать клавишу не нужно. Здесь мы «нажимаем» кнопку через dispatchEvent, потому что в упражнениях нет живой страницы.

Список: один обработчик на всех (делегирование)

Самая частая ошибка новичков — навешивать addEventListener на каждую кнопку «✕» при создании. Но при каждом render элементы создаются заново, и обработчики теряются или множатся. Решение из урока 9 — делегирование: один обработчик на общего родителя <ul>, а внутри мы смотрим, куда именно кликнули (event.target).

const list = document.createElement("ul");
list.innerHTML = `
  <li data-id="1">Плов <button data-action="delete">✕</button></li>
  <li data-id="2">Чой <button data-action="delete">✕</button></li>`;

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action='delete']");
  if (!btn) return;                     // кликнули не по кнопке удаления
  const li = btn.closest("li");
  console.log("Удаляем задачу", li.dataset.id);
  li.remove();
});

list.querySelector("button").click();
console.log(list.children.length);      // 1

Читать подробнее: learn.javascript.ru — делегирование событий · learn.javascript.ru — событие submit

const btn = document.createElement("button");
let clicks = 0;

// навесьте обработчик click

btn.click();
btn.click();
btn.click();
console.log(clicks);
console.log(btn.textContent);

3
Нажато: 3

const form = document.createElement("form");
form.innerHTML = '<input name="title"><button>Добавить</button>';
const input = form.querySelector("input");
const tasks = [];

// навесьте обработчик submit на form

function submit(value) {
  input.value = value;
  const notCancelled = form.dispatchEvent(new Event("submit", { cancelable: true }));
  console.log("отправка отменена:", !notCancelled);
}

submit("Купить лепёшки");
submit("   ");
submit("Сделать ДЗ");
console.log(tasks.join(" | "));
console.log(JSON.stringify(input.value));

отправка отменена: true
отправка отменена: true
отправка отменена: true
Купить лепёшки | Сделать ДЗ
""

const list = document.createElement("ul");
list.innerHTML = `
  <li data-id="1">Плов <button data-action="delete">✕</button></li>
  <li data-id="2">Чой <button data-action="delete">✕</button></li>
  <li data-id="3">Самбуса <button data-action="delete">✕</button></li>`;
const removed = [];

// один обработчик click на list

list.querySelectorAll("button")[1].click();   // удаляем «Чой»
list.querySelector("button").click();         // удаляем «Плов»
list.querySelector("li").click();             // клик по тексту — ничего не происходит
console.log(removed.join(","));
console.log(list.children.length);
console.log(list.firstElementChild.dataset.id);

2,1
1
3

const root = document.createElement("div");
root.innerHTML = `
  <form><input><button>Добавить</button></form>
  <ul></ul>`;
const form = root.querySelector("form");
const input = root.querySelector("input");
const list = root.querySelector("ul");

let state = { tasks: [], nextId: 1 };

const addTask = (s, title) => ({
  tasks: [...s.tasks, { id: s.nextId, title, done: false }],
  nextId: s.nextId + 1,
});
const toggleTask = (s, id) => ({
  ...s,
  tasks: s.tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
});
const removeTask = (s, id) => ({ ...s, tasks: s.tasks.filter((t) => t.id !== id) });

function createTaskItem(task) {
  const li = document.createElement("li");
  li.dataset.id = task.id;
  if (task.done) li.classList.add("done");
  const span = document.createElement("span");
  span.textContent = task.title;
  const del = document.createElement("button");
  del.dataset.action = "delete";
  del.textContent = "✕";
  li.append(span, del);
  return li;
}

// 1) function render() { ... }
// 2) form.addEventListener("submit", ...)
// 3) list.addEventListener("click", ...)

// --- проверка: имитируем действия пользователя ---
const add = (text) => {
  input.value = text;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
};
add("Плов");
add("Чой");
add("Самбуса");
console.log(list.children.length);
list.children[1].querySelector("span").click();      // отметить «Чой»
list.children[0].querySelector("button").click();    // удалить «Плов»
const summary = [...list.children]
  .map((li) => li.querySelector("span").textContent + (li.classList.contains("done") ? " ✓" : ""))
  .join(" | ");
console.log(list.children.length);
console.log(summary);

3
2
Чой ✓ | Самбуса

08 Разминка 4. Фильтры, счётчики и серии

Фильтр — это не удаление задач, а другой взгляд на то же состояние. Мы храним все задачи и выбранный режим state.filter, а render показывает только подходящие. Поэтому смена фильтра никогда ничего не теряет.

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
];

function getVisible(tasks, filter) {
  if (filter === "active") return tasks.filter((t) => !t.done);
  if (filter === "done") return tasks.filter((t) => t.done);
  return tasks;   // "all" и всё остальное
}

console.log(getVisible(tasks, "active").length);
console.log(tasks.length);   // исходный массив не пострадал

Счётчики считаются из состояния, а не хранятся

Число «Осталось: 3 из 5» не нужно хранить отдельным полем и обновлять руками при каждом действии. Его всегда можно посчитать из массива. Если хранить дважды, рано или поздно значения разойдутся.

Для варианта Б: привычки и серии

У привычки нет «выполнена навсегда»: она выполняется каждый день. Поэтому вместо done храним массив дат days: ["2026-10-14", "2026-10-15"]. «Сделано сегодня» — это проверка days.includes(today), а серия — сколько дней подряд идут отметки.

Читать подробнее: learn.javascript.ru — методы массивов (filter, find, includes)

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
  { title: "Самбуса", done: true },
  { title: "Курутоб", done: false },
];

// function getVisible(tasks, filter) { ... }

for (const f of ["all", "active", "done"]) {
  console.log(f + ":", getVisible(tasks, f).map((t) => t.title).join(", "));
}

all: Плов, Чой, Самбуса, Курутоб
active: Чой, Курутоб
done: Плов, Самбуса

// function counterText(tasks) { ... }

console.log(counterText([]));
console.log(counterText([{ done: true }, { done: false }, { done: false }, { done: true }]));
console.log(counterText([{ done: true }, { done: true }]));

Задач пока нет
Осталось: 2 из 4
Всё сделано!

const state = { filter: "all" };
const box = document.createElement("div");
box.innerHTML = `
  <button data-filter="all" class="active">Все</button>
  <button data-filter="active">Активные</button>
  <button data-filter="done">Готовые</button>`;

// один обработчик click на box

const report = () => {
  const act = [...box.querySelectorAll(".active")].map((b) => b.textContent);
  console.log(state.filter, act.join(","));
};
report();
box.querySelector("[data-filter='done']").click();
report();
box.querySelector("[data-filter='active']").click();
report();

all Все
done Готовые
active Активные

const prevDay = (str) => {
  const d = new Date(str + "T00:00:00Z");
  d.setUTCDate(d.getUTCDate() - 1);
  return d.toISOString().slice(0, 10);
};

// function streak(dates, today) { ... }

const today = "2026-10-15";
console.log(streak(["2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"], today));
console.log(streak(["2026-10-10", "2026-10-13", "2026-10-14"], today));
console.log(streak(["2026-10-01", "2026-10-02"], today));
console.log(streak([], today));
console.log(streak(["2026-10-15", "2026-10-14", "2026-10-14", "2026-10-11"], today));

4
2
0
0
2

09 Разминка 5. Сохранение: localStorage и JSON

Последний кирпич MVP — чтобы данные не пропадали после закрытия вкладки. localStorage — это маленькое хранилище прямо в браузере: пары «ключ — значение». Три метода, которые нужны почти всегда: setItem(key, value), getItem(key) и removeItem(key).

Главное ограничение: хранятся только строки. Число станет строкой "10", а объект превратится в бесполезное "[object Object]". Поэтому состояние перед записью превращаем в JSON-строку (JSON.stringify), а после чтения — обратно в объект (JSON.parse).

try {
  localStorage.setItem("test", "1");
  console.log("localStorage работает");
} catch (error) {
  console.log("localStorage недоступен:", error.name);
}

Обычно вы увидите SecurityError. Это нормально: именно поэтому ниже мы работаем через заменитель. Скопируйте его — он нужен в каждом упражнении этого раздела:

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },   // как и настоящий: всё в строку
  removeItem(key) { delete this.data[key]; },
};

storage.setItem("score", 10);
console.log(typeof storage.getItem("score"));   // string, а не number
console.log(storage.getItem("нет такого"));     // null — ключа нет

const state = { tasks: [{ id: 1, title: "Плов", done: false }], nextId: 2 };
storage.setItem("tracker:v1", JSON.stringify(state));   // объект → строка
console.log(storage.getItem("tracker:v1"));
const back = JSON.parse(storage.getItem("tracker:v1")); // строка → объект
console.log(back.tasks[0].title);

Читаем данные безопасно

Данные в localStorage могли испортиться, их мог вручную поправить пользователь, а при первом запуске их просто нет. Если слепо вызвать JSON.parse, приложение упадёт ещё до первого кадра. Поэтому читаем так: try/catch + проверка формы + запасной вариант.

const storage = { data: {}, getItem(k) { return k in this.data ? this.data[k] : null; }, setItem(k, v) { this.data[k] = String(v); } };
const KEY = "tracker:v1";

function loadState() {
  try {
    const state = JSON.parse(storage.getItem(KEY));     // null или сломанный JSON
    if (state && Array.isArray(state.tasks)) return state;  // проверяем форму
  } catch {
    // сломанный JSON — ничего страшного, начнём с чистого листа
  }
  return { tasks: [], filter: "all", nextId: 1 };
}

console.log(loadState().tasks.length);     // 0 — данных ещё нет
storage.setItem(KEY, "{oops");
console.log(loadState().tasks.length);     // 0 — JSON сломан, приложение живо

Читать подробнее: learn.javascript.ru — localStorage, sessionStorage · learn.javascript.ru — JSON · MDN — localStorage

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};

storage.setItem("score", 10);
const score = storage.getItem("score");
console.log(score + 5);   // хотим 15

15

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

// const saveState = (state) => ...
// const loadState = () => ...

saveState({
  tasks: [{ id: 1, title: "Плов", done: false }, { id: 2, title: "Чой", done: true }],
  filter: "all",
  nextId: 3,
});
console.log(typeof storage.getItem(KEY));
const loaded = loadState();
console.log(loaded.tasks.length);
console.log(loaded.tasks[1].title, loaded.tasks[1].done);
console.log(loaded.nextId);

string
2
Чой true
3

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

function loadState() {
  return JSON.parse(storage.getItem(KEY));
}

console.log("пусто:", loadState().tasks.length);
storage.setItem(KEY, "{oops, не JSON");
console.log("сломано:", loadState().tasks.length);
storage.setItem(KEY, JSON.stringify({ tasks: [{ id: 1 }, { id: 2 }], filter: "all", nextId: 3 }));
console.log("нормально:", loadState().tasks.length);
storage.setItem(KEY, JSON.stringify({ tasks: "oops" }));
console.log("странно:", loadState().tasks.length);

пусто: 0
сломано: 0
нормально: 2
странно: 0

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";
const fresh = () => ({ tasks: [], nextId: 1 });
const add = (s, title) => ({
  tasks: [...s.tasks, { id: s.nextId, title, done: false }],
  nextId: s.nextId + 1,
});
const toggle = (s, id) => ({
  ...s,
  tasks: s.tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
});

// function load() { ... }
// function save(state) { ... }

const boot = () => load();   // так приложение стартует после F5

let s = boot();
s = add(s, "Плов"); save(s);
s = add(s, "Чой"); save(s);
s = boot();                    // «перезагрузили страницу»
console.log(s.tasks.length, s.nextId);
s = add(s, "Самбуса"); save(s);
s = boot();
console.log(s.tasks.map((t) => t.id + ":" + t.title).join(" "));
s = toggle(s, 2); save(s);
s = boot();
console.log(s.tasks.filter((t) => t.done).map((t) => t.title).join());
storage.setItem(KEY, '{"tasks": "oops"}');   // испортили данные
console.log(boot().tasks.length);

2 3
1:Плов 2:Чой 3:Самбуса
Чой
0

10 Стартовый шаблон проекта

Ниже — рабочий скелет трекера задач. Он уже умеет добавлять задачи и рисовать их, а остальное — ваши «TODO». Код разбит на шесть блоков в том порядке, в каком его удобно читать и объяснять на защите: хранилище → состояние → элементы страницы → отрисовка → единая точка изменений → события.

1. Хранилище. В песочнице — заменитель, в проекте — настоящий localStorage.
2. Состояние и функции над ним. Чистые функции: получили состояние — вернули новое.
3. Элементы страницы. Один раз находим всё нужное через querySelector.
4. Отрисовка. render() строит интерфейс из state. Больше никто DOM не трогает.
5. Единая точка изменений. commit(next): записать новое состояние, сохранить, перерисовать. Любое действие пользователя заканчивается ею.
6. События. Форма, список (делегирование), фильтры.

Нажмите ▶ Запустить, добавьте пару задач — и вы увидите, что отметка, удаление и фильтры пока не работают. Это задача для вас.

<main class="app">
  <h1>Трекер задач</h1>
  <form id="form">
    <input id="title" placeholder="Что нужно сделать?" autocomplete="off">
    <button>Добавить</button>
  </form>
  <div class="filters" id="filters">
    <button data-filter="all">Все</button>
    <button data-filter="active">Активные</button>
    <button data-filter="done">Готовые</button>
  </div>
  <ul id="list"></ul>
  <p id="counter"></p>
</main>

.app { max-width: 420px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 12px; }
form { display: flex; gap: 8px; }
input { flex: 1; padding: 8px 10px; border: 1px solid #c7ccd6; border-radius: 8px; font: inherit; }
button { padding: 8px 12px; border: 0; border-radius: 8px; background: #1f6feb; color: #fff; font: inherit; cursor: pointer; }
.filters { display: flex; gap: 6px; margin: 12px 0; }
.filters button { background: #eef1f6; color: #1c2230; }
.filters button.active { background: #1c2230; color: #fff; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid #e6e9f0; cursor: pointer; }
li.done span { text-decoration: line-through; color: #8a93a6; }
li.empty { justify-content: center; color: #8a93a6; cursor: default; }
li button { background: transparent; color: #d1344f; padding: 2px 8px; }
#counter { color: #5b6477; font-size: 14px; }

// ===== 1. Хранилище =====
// Настоящий localStorage в песочнице заблокирован, поэтому берём заменитель с тем же API.
// В своём проекте весь этот блок заменяется одной строкой: const storage = localStorage;
const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

// ===== 2. Состояние и функции над ним (каждая возвращает НОВОЕ состояние) =====
const createState = () => ({ tasks: [], filter: "all", nextId: 1 });

function addTask(state, title) {
  const clean = title.trim();
  if (!clean) return state;
  return {
    ...state,
    tasks: [...state.tasks, { id: state.nextId, title: clean, done: false }],
    nextId: state.nextId + 1,
  };
}

// TODO 1: переверните done у задачи с нужным id
function toggleTask(state, id) {
  return state;
}

// TODO 2: уберите задачу с нужным id
function removeTask(state, id) {
  return state;
}

// TODO 3: верните задачи согласно state.filter ("all" | "active" | "done")
function getVisible(state) {
  return state.tasks;
}

function counterText(tasks) {
  if (tasks.length === 0) return "Задач пока нет";
  const left = tasks.filter((t) => !t.done).length;
  if (left === 0) return "Всё сделано!";
  return `Осталось: ${left} из ${tasks.length}`;
}

// TODO 4: прочитайте состояние из storage. Пусто или сломано — верните createState()
function load() {
  return createState();
}

// TODO 4: сохраните состояние в storage
function save(state) {
}

// ===== 3. Элементы страницы =====
const form = document.querySelector("#form");
const titleInput = document.querySelector("#title");
const filters = document.querySelector("#filters");
const list = document.querySelector("#list");
const counter = document.querySelector("#counter");

// ===== 4. Отрисовка: интерфейс целиком строится из state =====
function createTaskItem(task) {
  const li = document.createElement("li");
  li.dataset.id = task.id;
  if (task.done) li.classList.add("done");
  const span = document.createElement("span");
  span.textContent = task.title;
  const del = document.createElement("button");
  del.dataset.action = "delete";
  del.textContent = "✕";
  li.append(span, del);
  return li;
}

function render() {
  const visible = getVisible(state);
  list.innerHTML = "";
  if (visible.length === 0) {
    const empty = document.createElement("li");
    empty.className = "empty";
    empty.textContent = "Здесь пока пусто";
    list.append(empty);
  }
  visible.forEach((task) => list.append(createTaskItem(task)));
  filters.querySelectorAll("button").forEach((b) => {
    b.classList.toggle("active", b.dataset.filter === state.filter);
  });
  counter.textContent = counterText(state.tasks);
}

// ===== 5. Единая точка изменений =====
let state = load();

function commit(next) {
  state = next;
  save(state);
  render();
}

// ===== 6. События =====
form.addEventListener("submit", (event) => {
  event.preventDefault();
  commit(addTask(state, titleInput.value));
  titleInput.value = "";
  titleInput.focus();
});

list.addEventListener("click", (event) => {
  const li = event.target.closest("li[data-id]");
  if (!li) return;
  const id = Number(li.dataset.id);
  if (event.target.closest("button[data-action='delete']")) commit(removeTask(state, id));
  else commit(toggleTask(state, id));
});

// TODO 5: обработчик click на filters. Кнопка с data-filter → commit({ ...state, filter: ... })

render();

// ===== Самопроверка для задачи 10.1 (в свой проект не копируйте) =====
{
  const add = (text) => {
    titleInput.value = text;
    form.dispatchEvent(new Event("submit", { cancelable: true }));
  };
  add("Плов");
  add("Чой");
  add("Самбуса");
  console.log("добавление:", list.children.length);
  list.children[1].querySelector("span").click();
  console.log("отметка:", list.querySelectorAll("li.done").length);
  list.children[0].querySelector("button").click();
  console.log("удаление:", list.children.length);
  filters.querySelector("[data-filter='done']").click();
  console.log("фильтр:", list.children.length);
  console.log("хранилище:", (JSON.parse(storage.getItem(KEY) || "{}").tasks || []).length);
  commit(createState());   // убираем за собой
}

добавление: 3
отметка: 1
удаление: 2
фильтр: 1
хранилище: 2

Как перенести шаблон в свой проект

1. В VS Code создайте папку проекта и три файла: index.html, style.css, script.js. Разметку из вкладки index.html положите внутрь <body>, остальные вкладки — в одноимённые файлы.
2. В index.html подключите стили и скрипт: <link rel="stylesheet" href="style.css"> и в конце body — <script src="script.js"></script>.
3. Замените блок «Хранилище» одной строкой: const storage = localStorage;.
4. Удалите блок самопроверки внизу файла.
5. Если у вас уже есть проект из уроков 9–11 — не выбрасывайте его. Сравните его структуру со шаблоном и перестройте по схеме «состояние → render → commit → события».

Вариант Б: что меняется в шаблоне для привычек

const toggleToday = (state, id, today) => ({
  ...state,
  habits: state.habits.map((h) => {
    if (h.id !== id) return h;
    const days = h.days.includes(today)
      ? h.days.filter((d) => d !== today)   // уже была отметка — снимаем
      : [...h.days, today];                 // отметки не было — ставим
    return { ...h, days };
  }),
});

const state = { habits: [{ id: 1, name: "Читать 20 минут", days: ["2026-10-14"] }] };
const today = "2026-10-15";   // в приложении: new Date().toISOString().slice(0, 10)

const s1 = toggleToday(state, 1, today);
console.log(s1.habits[0].days.join(", "));
const s2 = toggleToday(s1, 1, today);
console.log(s2.habits[0].days.join(", "));

Заметка: toISOString() считает дату по UTC. Для учебного проекта это допустимо, но около полуночи «сегодня» может отличаться от вашего местного дня на несколько часов. Это можно упомянуть на защите как известное ограничение.

11 Практика на уроке: 90 минут

На занятии вы доводите проект до MVP, проверяете друг друга и начинаете защиты. Время ограничено, поэтому действуем по плану.

1. 0–10 мин · Декомпозиция. Вы выбрали вариант (А или Б), составили вместе с ИИ план из 10–15 шагов и поправили его по правилам из раздела 04. Покажите план соседу: 1 минута на вопрос «где у тебя самый рискованный шаг?». Преподаватель утверждает варианты и планы.
2. 10–50 мин · Доработка проекта. Идёте по своему плану сверху вниз. Правило пятнадцати минут: каждые 15 минут — стоп, F5, проверка в браузере и в консоли. Застряли — сначала сами 15 минут, потом сосед, потом ИИ, потом преподаватель.
3. 50–70 мин · Code review в парах. По 10 минут на проект. Ревьюер идёт по чек-листу из раздела 12, автор слушает и записывает. Затем меняетесь.
4. 70–90 мин · Исправления и начало защит. Правите замечания ревью. Защиты идут по очереди (5 минут + минута на смену), порядок определяет преподаватель. Кто не успел сегодня — защищается в начале следующего занятия или по договорённости.

Контрольные точки: где вы должны быть

12 Code review: проверяем друг друга

Code review — когда один разработчик читает код другого до того, как он «уйдёт в мир». Это не экзамен и не поиск виноватых: свежий взгляд видит то, что автор давно перестал замечать. В реальных командах без ревью код вообще не принимают.

Как проходит ревью (10 минут на проект)

1. 2 мин — запуск. Автор показывает приложение, ревьюер сам пробует его сломать.
2. 5 мин — чтение кода. Ревьюер идёт по чек-листу ниже и записывает замечания.
3. 3 мин — разговор. Три пункта «что хорошо», три — «что улучшить». Автор задаёт уточняющие вопросы и решает, что принять.

Чек-лист ревьюера

Как писать замечания

Формула замечания: где (файл и строка) → что вижу → почему это важно → предложение (лучше вопросом). Критикуем код, а не человека. Ревьюер не переписывает чужой код за автора.

Читать подробнее: learn.javascript.ru — отладка в браузере

function addTask(state, title) {
  const id = state.tasks.length + 1;
  return { ...state, tasks: [...state.tasks, { id, title, done: false }] };
}

let s = { tasks: [], nextId: 1 };
s = addTask(s, "Плов");
s = addTask(s, "Чой");
s = addTask(s, "Самбуса");
s = { ...s, tasks: s.tasks.filter((t) => t.id !== 2) };   // удалили «Чой»
s = addTask(s, "Курутоб");
console.log(s.tasks.map((t) => t.id).join(","));

1,3,4

function getVisible(tasks, filter) {
  if (filter === "activ") return tasks.filter((t) => !t.done);
  if (filter === "done") return tasks.filter((t) => t.done);
  return tasks;
}

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
  { title: "Самбуса", done: false },
];
console.log(getVisible(tasks, "all").length);
console.log(getVisible(tasks, "active").length);
console.log(getVisible(tasks, "done").length);

3
2
1

13 Защита: 5 минут, которые решают 15 баллов

Защита — это короткий рассказ о том, что вы сделали и как это работает. Не презентация и не допрос: вам нужно показать, что проект — ваш и вы его понимаете. Именно поэтому на защиту отведено 15 баллов из 100.

Сценарий на 5 минут

Типичные вопросы и о чём на них нужно сказать

Что такое state и где он у тебя?

Один объект со всеми данными приложения: список, фильтр, следующий id. Страница рисуется из него. Покажите его в коде.

Зачем render каждый раз строит список заново?

Проще и надёжнее: не нужно искать, какой элемент изменился. Страница всегда соответствует состоянию. Для небольшого списка это быстро.

Что такое делегирование и зачем оно здесь?

Один обработчик на списке вместо обработчика на каждой кнопке. После render элементы создаются заново, а обработчик на родителе остаётся и работает для новых элементов.

Зачем нужен preventDefault в submit?

Без него браузер отправит форму и перезагрузит страницу — состояние в памяти потеряется.

Что и в каком виде лежит в localStorage?

JSON-строка с состоянием под ключом проекта. Хранилище понимает только строки, поэтому JSON.stringify при записи и JSON.parse при чтении.

Что будет, если в хранилище мусор?

try/catch вокруг JSON.parse и проверка формы: при проблеме приложение стартует с пустым состоянием и не падает.

Как у тебя считается id? Что после удаления?

Через отдельный счётчик nextId, который только растёт. length + 1 дал бы повторы.

Почему textContent, а не innerHTML?

Текст пользователя нельзя воспринимать как разметку: иначе в приложение можно подсунуть чужой HTML и скрипты.

Где ты использовал ИИ? Объясни эту строку.

Скажите честно, для чего: декомпозиция, объяснение ошибки, проверка. Любую строку, которую показал преподаватель, нужно объяснить своими словами.

Что бы ты улучшил, будь у тебя ещё день?

Назовите 1–2 конкретные вещи: редактирование, поиск, тесты. Это показывает, что вы видите ограничения проекта.

Советы по подготовке

• Прогоните сценарий демо вслух с секундомером минимум один раз.
• Откройте нужные файлы заранее и увеличьте шрифт в редакторе: группа должна видеть код.
• Уберите лишнее: закомментированный код, console.log, тестовые данные в хранилище.
• Не оправдывайтесь («я не успел»). Лучше: «этого нет, потому что… вот как я бы добавил».
• Не знаете ответ — это нормально. Скажите «не помню, но попробую найти в документации и покажу» — это оценивается лучше, чем угадывание.

const defence = {
  state: "Мой state — объект с полями ... Он лежит в ...",
  render: "",
  delegation: "",
  storage: "",
  improve: "",
};

console.log(Object.keys(defence).length + " ответов подготовлено");

14 Заливка проекта на GitHub

Проект, который лежит только на вашем ноутбуке, не существует для работодателя. GitHub — это ваше портфолио. Базовый Git (init, commit, push) вы знаете из входных требований курса; системно мы разберём его на уроке 19, а сегодня — минимальный путь «папка → репозиторий».

1. Создайте репозиторий. На github.com нажмите New repository. Имя — английское, через дефис: task-tracker или habit-tracker. Выберите Public. Галочки «Add a README», «.gitignore» и «license» не ставьте — репозиторий должен быть пустым.
2. Инициализируйте Git в папке проекта и сделайте первый коммит:
   Терминал (в папке проекта)

   git init
   git add .
   git commit -m "add tracker app"

3. Привяжите репозиторий и отправьте код. Скопируйте адрес со страницы нового репозитория (вместо ВАШ_ЛОГИН подставьте ваше имя на GitHub):
   Терминал

   git branch -M main
   git remote add origin https://github.com/ВАШ_ЛОГИН/task-tracker.git
   git push -u origin main

4. Проверьте результат. Обновите страницу репозитория: файлы на месте, в корне виден index.html. Откройте репозиторий в приватном окне браузера или с телефона — ссылка должна открываться без входа в аккаунт.
5. Добавьте README.md по шаблону ниже, сделайте скриншот приложения и положите его в репозиторий.
6. Исправления по ревью заливайте отдельными коммитами — так в истории видно, что вы доработали:
   Терминал

   git add .
   git commit -m "fix duplicate ids after delete"
   git push

# Трекер задач

Приложение на чистом JavaScript: добавление, отметка и удаление задач,
фильтры, счётчик. Данные сохраняются в localStorage.

## Что умеет
- добавлять задачи (с проверкой на пустую строку)
- отмечать выполненными и удалять
- фильтры «Все / Активные / Готовые»
- помнить данные после перезагрузки

## Стек
HTML, CSS, JavaScript (без библиотек)

## Запуск
Откройте index.html в браузере.

## Скриншот
![Скриншот](screenshot.png)

## Что исправил после code review
- ...

## Что можно улучшить
- ...

Читать подробнее: GitHub Docs — Hello World

15 Домашнее задание

Доработайте проект по замечаниям ревью и защиты и залейте его на GitHub.

Что нужно сделать

• ☐ Исправить замечания, которые вы приняли на ревью и защите.
• ☐ Проверить все пункты MVP из раздела 02 и пройти чек-лист ревьюера по своему проекту ещё раз.
• ☐ Убрать из кода лишние console.log, закомментированный код и мёртвые функции.
• ☐ Написать README.md (что это, стек, запуск, скриншот, что исправили, что можно улучшить).
• ☐ Залить проект на GitHub: репозиторий публичный, не менее 5 осмысленных коммитов.
• ☐ Если защиту ещё не проходили — подготовиться по разделу 13.

Что сдать

Ссылку на репозиторий в чат группы (Telegram). В сообщении напишите: вариант проекта (А или Б), что добавили после ревью, какой бонус сделали (если сделали).

Как оценивается ДЗ (0–10)

Это оценка за домашнее задание урока (0–10). Оценка за сам мини-проект (0–100) выставляется по таблице из раздела 03 и учитывается отдельно.