Поздравляем!

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

Последнее улучшение. Вычеркните молоко — а сумма к оплате не изменится. В магазине полезнее видеть, сколько будут стоить ещё не купленные товары. Поэтому в getTotal() складывайте только цены товаров, у которых bought равно false. Вам подойдёт условие !item.bought (не куплен). А поскольку showItems() запускается после каждого щелчка, сумма обновляется сама.

Что вы узнали. Посмотрите, как каждая часть курса нашла своё место в вашем приложении:

• Переменные и константы хранят элементы страницы, название и цену.
• Условия проверяют ввод и решают, зачёркнут ли товар.
• Массив хранит список покупок, а push() добавляет в него товары.
• Циклы проходят по товарам, чтобы показать их и сложить цены.
• Функции делят приложение на части с понятными задачами: showItems() показывает, getTotal() считает, saveItems() сохраняет, а loadItems() загружает.
• Объекты собирают вместе всё, что относится к одному товару: его название, цену и отметку о покупке.
• Методы массивов: filter() одной строкой оставляет только не купленные товары.
• Страница и её события: вы находите элементы, меняете их текст и классы, создаёте новые, реагируете на щелчки и показываете сообщение, когда что-то не так.
• Ожидание: с помощью async и await функция loadItems() ждёт файл, пока страница продолжает работать.
• Данные: fetch() загружает начальные товары из JSON-файла, а localStorage хранит список, когда страница закрыта.

Сохраните своё приложение. Приложение состоит из трёх файлов, и они должны лежать в одной папке:

1. Создайте на компьютере новую папку, например shopping-list.
2. Откройте простой текстовый редактор, например Блокнот в Windows или TextEdit на Mac (переключённый в режим простого текста в меню «Формат»), либо редактор кода, например Visual Studio Code. Вставьте код из index.html и сохраните его в этой папке как index.html.
3. Так же сохраните в той же папке script.js и items.json, каждый под своим именем.

Если теперь дважды щёлкнуть по index.html, приложение откроется, но будет всё время показывать Загрузка…. Браузер открывает страницу прямо с диска, по адресу, который начинается с file://, и не позволяет такой странице загружать другие файлы через fetch(). Почему так, показывает консоль: в Chrome это ошибка о политике CORS и TypeError: Failed to fetch. Ваше сообщение о том, что список не удалось загрузить, тоже не появляется, потому что fetch() не получает никакого ответа, даже 404. Он завершается ошибкой, которая прерывает loadItems() на await.

Страница должна приходить с веб-сервера, как страницы в интернете. Простой способ его получить — Visual Studio Code с расширением Live Server: откройте свою папку в VS Code (File, Open Folder), установите Live Server на панели расширений слева и нажмите Go Live внизу справа. Приложение откроется в браузере по адресу вроде http://127.0.0.1:5500/index.html, и начальные товары загрузятся. Live Server работает только на вашем компьютере и только пока открыт VS Code, поэтому никто другой этот адрес открыть не сможет. Он нужен, чтобы пробовать свои страницы.

В браузере консоль сначала скрыта: откройте инструменты разработчика клавишей F12 (на Mac — Cmd+Option+I) и перейдите на вкладку Console («Консоль»). Там вы найдёте то, что выводит ваш скрипт, и его ошибки. А когда вы перезагрузите страницу, ваш список будет на месте, потому что браузер хранит его в localStorage. У каждого адреса оно своё: страница, открытая из файла, тоже может сохранять данные в localStorage, но сохранённого ею нет по адресу http://127.0.0.1:5500, и наоборот.

Что дальше. Теперь вы знаете основы, из которых состоит любая программа на JavaScript, в том числе в браузере. Вот несколько идей, чем заняться дальше:

• Продолжайте улучшать свой список. Для этого вы уже знаете всё необходимое: кнопка удаления для каждого товара (поможет один обработчик на весь список), добавление товара по нажатию Enter, количество для каждого товара, сортировка по цене или сообщение на случай, если сам fetch() не сработал (try и catch). Больше всего учишься, решая собственные задачи.
• TypeScript — это JavaScript с типами: вы записываете, какое значение хранит каждая переменная и каждый параметр, а TypeScript находит многие ошибки ещё до запуска программы. Большие приложения обычно пишут на нём, и курс по TypeScript продолжает этот курс.
• React — библиотека для создания веб-приложений из компонентов. Она построена ровно на том, что вы здесь изучили: данные и страница, которая их показывает. Курс по React тоже продолжает этот курс.

А если вы ещё не проходили курс по HTML и курс по CSS, они научат вас самим создавать всю страницу и её внешний вид, а не только скрипт.