Список покупок

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

Вы будете использовать переменные, условия, массивы, циклы, функции и объекты, а также всё, что узнали о веб-страницах, событиях и данных с сервера. Каждое упражнение продолжает предыдущее (в редакторе уже лежит готовый код) и добавляет одну часть. В конце у вас будет целое приложение, которое вы построили шаг за шагом.

Страница. Страница в index.html уже готова, поэтому работать вы будете почти только в script.js. Скрипт будет работать с такими элементами (они перечислены по id):

• list — список товаров (ul), пока пустой,
• total — сколько стоят покупки. Это span, элемент для кусочка текста внутри абзаца,
• name и price — текстовые поля для названия товара и его цены (у поля цены type="number": оно предназначено для чисел),
• add — кнопка, которая добавляет товар в список,
• message — абзац для сообщений, например когда вы забыли ввести цену.

В элементе style в начале страницы есть и стиль для класса bought, который зачёркивает товар. Он понадобится позже. В начале script.js мы уже нашли элементы с помощью document.querySelector() и сохранили их в константы, так что можно сразу приступать.

План. Список покупок хранится в массиве объектов, по одному объекту на товар, например { name: "Молоко", price: 90 }. Этот массив — данные приложения. Страница лишь показывает данные: функция showItems() очищает список на странице и создаёт элемент li для каждого товара из массива. Когда данные меняются, например при добавлении товара, скрипт меняет массив и снова вызывает showItems(). Это та же идея, что и у счётчика из урока «JavaScript на веб-страницах»: значение живёт в переменной, а страница его показывает.

Напоминаем, как создать элемент и поместить его на страницу:

const li = document.createElement("li");
li.textContent = "Молоко";
list.append(li);