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

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

Первые три строки — это MVP, минимум, после которого приложением уже можно пользоваться. Две последние дописываются поверх работающего кода, а не вместо него. Отметим это прямо в коде — так виднее, где сегодняшняя граница.

const features = { add: true, toggle: true, remove: true, storage: false, filter: false };
const mvp = Object.keys(features).filter((key) => features[key]);
console.log(mvp.join(", "));
console.log(mvp.length);

Требования отвечают на вопрос «что», шаги — на вопрос «в каком порядке». Хороший шаг заканчивается чем-то проверяемым: открыл страницу — увидел результат. Если после шага смотреть не на что, шаг выбран неудачно.

const plan = ["разметка", "данные", "рендер", "добавление", "переключение", "удаление"];
console.log(plan.length);
console.log(`Шаг 3: ${plan[2]}`);

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

Не садитесь писать код, пока не можете назвать шаг, который делаете прямо сейчас. Если название расплывается — шаг слишком большой, поделите его надвое.

HTML для проекта нужен скромный: форма с полем ввода и кнопкой, а под ней пустой <ul>. Ни одной <li> руками не пишем — все строки создаёт JavaScript. Иначе тестовая задача «ааа проверка» однажды доедет до живого сайта.

Каждой строке нужен опознавательный знак — атрибут data-id. По нему обработчик поймёт, какую именно задачу отметили или удалили: не по тексту (тексты повторяются) и не по позиции (позиции сдвигаются).

const item = (id, title) => `<li data-id="${id}"><span>${title}</span></li>`;
console.log(item(7, "Купить хлеб"));

const page = `<form id="new-task">
  <input name="title" placeholder="Что сделать?" required>
  <button>Добавить</button>
</form>
<ul id="list"></ul>`;
console.log(page);

Файлов будет три: index.html, style.css, app.js. Сборщики, модули и папка src появятся в других проектах — здесь они добавили бы шагов, но не понимания.

Начинается index.html со скелета, общего для любой страницы: doctype, служебный <head> с кодировкой и названием вкладки и видимый <body>. Зачем нужна каждая его строка, разобрано в прологе, в статье про скелет страницы.

Скрипт подключаем с атрибутом defer: браузер скачает файл параллельно с разметкой, а выполнит, когда страница уже собрана. Так код не будет искать список, которого ещё нет. Внутри app.js — одно состояние и одна функция запуска.

const state = { tasks: [] };
function start() {
  console.log(`Задач при старте: ${state.tasks.length}`);
}
start();

Самое важное решение проекта — как выглядит одна задача. Договоримся: это объект с тремя полями. id — число, уникальное и неизменное; title — строка; done — true или false, и никаких «да», «нет» и пустых строк.

let lastId = 0;
function makeTask(title) {
  lastId += 1;
  return { id: lastId, title: title.trim(), done: false };
}
console.log(JSON.stringify(makeTask("  Полить кактус  ")));

Весь список — массив таких объектов, и он единственный источник правды. Экран лишь отражает массив: поменяли данные — перерисовали. Обратное направление, когда состояние вычитывают из текста строк на странице, работает ровно до первой задачи с названием «Удалить».

const tasks = [
  { id: 1, title: "Хлеб", done: true },
  { id: 2, title: "Молоко", done: false },
];
console.log(tasks.filter((t) => !t.done).length);
console.log(tasks.find((t) => t.id === 1).title);

const tasks = [{ id: 10 }, { id: 11 }, { id: 12 }];
tasks.splice(0, 1); // удалили первую
console.log(tasks[1].id);