Стек: HTML, SCSS, TS, Webpack

Структура проекта:

• src/ — исходные файлы проекта
• src/components/ — папка с JS компонентами
• src/components/base/ — папка с базовым кодом

Важные файлы:

• src/pages/index.html — HTML-файл главной страницы
• src/types/index.ts — файл с типами
• src/index.ts — точка входа приложения
• src/styles/styles.scss — корневой файл стилей
• src/utils/constants.ts — файл с константами
• src/utils/utils.ts — файл с утилитами

Для установки и запуска проекта необходимо выполнить команды

npm install
npm run start

или

yarn
yarn start

npm run build

или

yarn build

В проекте применен принцип MVP (Model-View-Presenter), который обеспечивает четкое разделение ответственностей между классами Model и View каждый класс выполняет свою определенную роль:

Model - работа с загрузкой данных по API, сохранение и работа с данными полученными от пользователя.

View - отображает интерфейс для взаимодействия с пользователем, отлавливает и сообщает о произошедших событиях.

EventEmitter выступает в роли Представителя (Presenter) - связывает модели данных с отображением интерфейсов при сработке какого нибудь события, управляя взаимодействием между ними.

Методы:

• handleResponse(response: Response): Promise<object> - обработчик ответа сервера.
• get(uri: string) - принимает изменяющеюся часть url-адреса, возвращает ответ от сервера.
• post(uri: string, data: object, method: ApiPostMethods = 'POST') - принимает изменяющеюся часть url-адреса, принимает данные в виде объекта для отправки на сервер, type ApiPostMethods = 'POST' | 'PUT' | 'DELETE'.

Класс EventEmitter реализует паттерн «Observer/Наблюдатель» и обеспечивает работу событий, его методы позволяют устанавливать и снимать слушатели событий, вызвать слушатели при возникновении события.

Методы:

• on - для подписки на событие.
• off - для отписки от события.
• emit - уведомления подписчиков о наступлении события соответственно.
• onAll - для подписки на все события.
• offAll - сброса всех подписчиков.
• trigger - генерирует заданное событие с заданными аргументами. Это позволяет передавать его в качестве обработчика события в другие классы. Эти классы будут генерировать события, не будучи при этом напрямую зависимыми от класса EventEmitter.

Методы:

• getListProductCard - получаем массив объектов(карточек) с сервера.
• postOrderLot - получаем ответ от сервера по сделанному/отправленному заказу.

Методы:

• getCounter - возвращает количество товаров в корзине.
• getSumAllProducts - считает и возвращает сумму синапсов всех товаров в корзине.
• setSelectedСard - добавляет товар в корзину.
• deleteCardToBasket - удаляет товар из корзины.
• clearBasketProducts - очищает/удаляет все товары из корзины.

Метод:

• setPreview - получает данные карточки которую открыл пользователь.

Методы:

• setOrderAddress - принимаем/сохраняет адрес пользователя.
• validateOrder - проверяет адрес пользователя / и способ оплаты.
• setOrderData - принимаем/сохраняет номер телефона/почту пользователя.
• validateContacts - проверяет номер телефона/почту пользователя.
• getOrderLot - возвращает объект данных пользователя с выбранными товарами.

Методы:

• renderHeaderBasketCounter - сохраняет и устанавливает какое количество товаров находится в корзине.
• renderSumAllProducts - сохраняет и устанавливает сумму синапсов всех товаров в корзине.

метод:

• setPrice - принимает цену продукта в числовом значении и возвращает в строчном.

Методы:

• setText - принимает два значения, первое HTMLElement, второе значение задаёт текстовое содержимое HTMLElement.
• cardCategory - принимает строчное значение и создаёт новый className для HTMLElement.
• setPrice - принимает цену продукта в числовом значении и возвращает в строчном.

Метод:

• notSale - принимает данные о продукте, проверяет наличие цены продукта, при отсутствии цены ограничивает покупку.

Метод:

• paymentSelection - устанавливаем обводку вокруг выбранного метода оплаты.

Методы:

• open - отображает модальное окон.
• close - закрывает модальное окно.