Отладка, стиль и финальная сборка

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

const prices = [100, 200, 300];
let total = 0;
for (let i = 1; i <= prices.length; i++) {
  total += prices[i];
}
console.log(total);

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

const prices = [100, 200, 300];
for (let i = 1; i <= prices.length; i++) {
  console.log("шаг", i, "значение", prices[i]);
}

Виновник виден сразу: первый элемент пропущен, а на третьем шаге цикл вышел за край массива. Лечится заменой на let i = 0 и i < prices.length. Когда логов становится много, переходите на вкладку Sources в инструментах разработчика: строка debugger в коде остановит выполнение, и все переменные можно будет рассмотреть без единой печати.

Почти все баги первого проекта — это три-четыре повторяющихся сюжета. Если узнавать их по симптому, отладка занимает минуту вместо вечера.

function double(n) {
  n * 2;
}
console.log(double(21));

const fromInput = "10";
console.log(fromInput + 5);
console.log(Number(fromInput) + 5);

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

const coffee = { title: "Кофе", price: 250 };
const tea = { title: "Чай", price: 180 };
console.log(coffee.title + " — " + coffee.price + " ₽");
console.log(tea.title + " — " + tea.price + " ₽");

function formatItem(item) {
  return `${item.title} — ${item.price} ₽`;
}
console.log(formatItem({ title: "Кофе", price: 250 }));
console.log(formatItem({ title: "Чай", price: 180 }));

Сравните две записи одного и того же: function f(a, b) { return a.filter((x) => x.p <= b); } — и версию ниже. Код одинаковый, но вторую можно прочитать вслух и сразу понять, что она делает.

function findAffordable(products, budget) {
  return products.filter((product) => product.price <= budget);
}
const goods = [{ price: 250 }, { price: 900 }];
console.log(findAffordable(goods, 300).length);

Имя переменной — это комментарий, который невозможно забыть обновить.

Первое — подписи. У каждого поля должен быть свой <label for="..."> или, если подпись не помещается в макет, атрибут aria-label. Иконка-крестик без подписи для программы чтения с экрана — просто «кнопка», и пользователь не узнает, что она удаляет товар.

Второе — роли. Кликабельный <div> только выглядит как кнопка: Tab до него не доходит, ни Enter, ни пробел его не нажимают, программа чтения с экрана не называет его кнопкой. <button> даёт всё это сам; переход по адресу — <a>, действие — <button>. И роли, и подписи по пунктам разобраны в прологе — в статье про кнопки, ссылки и подписи.

// Такой код нужен только тем, кто отказался от <button>
function isActivateKey(event) {
  return event.key === "Enter" || event.key === " ";
}
console.log(isActivateKey({ key: "Enter" }));
console.log(isActivateKey({ key: "a" }));

Перед тем как показать проект кому-то, пройдите короткий чек-лист: консоль пуста от ошибок, все данные приводятся к числу там, где считаются, повторов нет, имена читаются вслух, по проекту можно пройти клавиатурой, а в коде не осталось отладочных console.log.

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