Как добавить покупки в Корзину с помощью HTML CSS и Javascript

• Приветствие и представление канала.  

• Цель видео: создание функции добавления товаров в корзину с использованием HTML, CSS и JavaScript.  

• Описание текущей страницы со списком продуктов и значками корзины.  

• Обновление товаров в корзине при добавлении.  

• Увеличение количества товара в корзине при добавлении уже имеющегося товара.  

• Удаление товара из корзины при уменьшении количества до нуля.  

• Важность адаптивности веб-сайта для различных платформ.  

• Создание трех файлов HTML, CSS и JavaScript.  

• Описание структуры HTML-файла с классами для содержимого и заголовков.  

• Создание класса для значка корзины и тега span для отображения количества товаров.  

• Поиск и импорт шрифта для заголовка.  

• Настройка ширины и положения контейнера для адаптивности.  

• Создание класса для списка товаров product.  

• Описание элементов списка: изображение, название, цена.  

• Максимальный размер изображений товаров составляет 100% от размера класса товара.  

• Использование drop shadow для создания эффекта тени за товаром.  

• Разделение списка товаров на четыре равных столбца с расстоянием между ними 20 пикселей.  

• Настройка фона и отступов для элементов, использование радиуса границы.  

• Уменьшение размера шрифта для тега h2 и создание кнопки для добавления товаров в корзину.  

• Создание окна корзины покупок с черным фоном и белым текстом.  

• Использование position: fixed для перекрытия содержимого веб-сайта.  

• Разделение содержимого на три строки с использованием сетки.  

• Настройка кнопок для закрытия окна и перехода на страницу оплаты.  

• Добавление товаров в корзину с информацией о продукте: изображение, название, общая цена и количество.  

• Использование сетки для разделения столбцов и настройка ширины изображений.  

• Добавление навигационных кнопок для изменения количества товаров.  

• Решение проблемы с отображением кнопок оформления заказа при большом количестве товаров.  

• Использование overflow: auto для создания полосы прокрутки при необходимости.  

• Проверка условий для отображения и скрытия окна корзины покупок.  

• Ловля событий для скрытия и показа окна корзины покупок.  

• Добавление класса "показать корзину" при нажатии на иконку корзины.  

• Обработка событий для скрытия окна при нажатии на кнопку "Закрыть".  

• Подготовка данных о товарах в JSON-файле.  

• Использование fetch для получения данных о продуктах.  

• Создание виртуального HTTP-домена для работы с данными.  

• Отображение данных о товарах на экране и обработка событий для добавления в корзину.  

• Отслеживание событий для добавления товаров в корзину.  

• Передача идентификатора продукта в функцию для добавления в корзину.  

• Обновление тега span с общим количеством товаров в корзине.  

• Основная корзина для покупок состоит из идентификатора товара и количества.  

• Если текущая корзина пуста, работа будет простой.  

• Основная корзина для покупок включает идентификатор товара и количество, равное единице.  

• Если товар уже есть в корзине, увеличиваем количество на единицу.  

• Если товара нет, добавляем его в конец массива.  

• Используем функцию "Добавить корзину в HTML" для отображения товаров.  

• Создаем компонент с классом item для каждого товара.  

• Сохраняем данные о корзине в локальном хранилище.  

• Преобразуем массив в формат JSON для сохранения.  

• Отслеживаем события нажатия на кнопки со стрелками.  

• Определяем идентификатор товара и изменяем количество.  

• Проверяем, что данные о корзине сохраняются при обновлении страницы.  

• Проверяем работу дизайна на разных экранах.  

• Завершаем упражнение и проверяем функциональность на разных устройствах.  

• Призываем оставлять комментарии и подписываться на канал.