Pizza-Go
Описание проекта "Go-Go Pizza"
Общее описание
Проект "Go-Go Pizza" представляет собой веб-сервис доставки пиццы. Веб-сайт включает в себя функционал для выбора пиццы, добавления топпингов, просмотра корзины и оформления заказа.
Структура проекта
index.html
Основной HTML-файл проекта, который включает в себя структуру веб-страницы. Содержит заголовок, основное содержимое и подвал. Подключает внешние стили, шрифты и JavaScript-файлы для добавления интерактивности.
main.js
Основной JavaScript-файл, который инициализирует все необходимые модули и функции для работы веб-страницы. Импортирует модули для управления модальными окнами, рендеринга пицц и топпингов, а также взаимодействия с API.
toppingsToggle.js
Файл, содержащий функцию toppingsToggle
, которая управляет отображением списка топпингов. Добавляет обработчик клика по кнопке выбора топпинга, который открывает или закрывает список топпингов с плавной анимацией.
serviceApi.js
Файл, содержащий функцию getData
, которая отвечает за получение данных с сервера через API. Использует fetch
для отправки HTTP-запросов и обрабатывает возможные ошибки. Управляет отображением лоадера (загрузчика).
renderToppings.js
Файл, содержащий функцию renderToppings
, которая отвечает за рендеринг списка топпингов на веб-странице. Получает данные о топпингах с сервера и создает элементы списка для каждого топпинга. Управляет выбором топпингов и рендерингом пицц с учетом выбранных топпингов.
renderPizzas.js
Файл, содержащий функцию renderPizzas
, которая отвечает за рендеринг списка пицц на веб-странице. Получает данные о пиццах с сервера и создает карточки пиццы для каждой пиццы. Управляет открытием модального окна с информацией о пицце при клике на кнопку "Выбрать".
renderModalPizza.js
Файл, содержащий функцию renderModalPizza
, которая отвечает за рендеринг модального окна с информацией о выбранной пицце. Создает элементы для отображения изображения пиццы, названия, цены, размера и типа теста. Управляет добавлением пиццы в корзину и отображением кнопки сброса фильтра.
modalController.js
Файл, содержащий функцию modalController
, которая отвечает за управление модальными окнами. Управляет открытием и закрытием модальных окон, анимацией появления и исчезновения, блокировкой и разблокировкой прокрутки страницы, а также вызовом функций обратного вызова при открытии модального окна.
modalCartController.js
Файл, содержащий функцию modalCartController
, которая отвечает за управление модальным окном корзины. Рендерит список товаров в корзине, управляет удалением товаров, переходом между блоками и отправкой заказа на сервер.
helper.js
Файл, содержащий вспомогательные функции для упрощения и улучшения кода. Включает функции для преобразования первой буквы строки в верхний регистр, создания радио-кнопок и меток.
cartControl.js
Файл, содержащий объект cartControl
, который отвечает за управление корзиной. Включает методы для добавления, удаления и очистки товаров в корзине, а также сохранение данных корзины в localStorage
.
scrollController.js
Файл, содержащий объект scrollController
, который отвечает за управление прокруткой страницы. Включает методы для отключения и включения прокрутки, сохранения текущей позиции прокрутки и восстановления её после разблокировки прокрутки.
Оптимизация изображений
Изображения продукции конвертированы в формат WebP для оптимизации загрузки и улучшения производительности. Это позволяет уменьшить размер изображений и ускорить загрузку страницы, что улучшает пользовательский опыт.
Языки
JavaScript
- CSS
- HTML