Необходимо сделать страницу оформления заказа в интернет-магазине. Визуально результат должен выглядеть так, как указано в мокапах (см. "Дополнительные материалы", пункт 1).
Задача состоит из следующих подзадач:
- Корзина должна иметь 4 состояния 1.1. Корзина (список товаров) 1.2. Доставка (заполнение данных о доставке) 1.3. Оплата (заполнение данных об оплате) 1.4. Статус (состояние заказа - успешно или ошибка).
- Переключение между состояними должно быть реализовано динамически (через кнопки "Перейти к доставке", Перейти к оплате", "Оплатить" и "Вернуться на главную", а также через "хлебные крошки" над заголовком).
- Товары в корзине имеют поле для изменения количества и кнопку для удаления. Изменение количества должно влиять на подитог и итоговую цену.
- Поле для промокода при правильном значении должно уменьшать цену на 10% (правильный промокод - "promo_ok")
- Задача должна быть выполнена на типовой сборке (TARS)
- Фреймворки и библиотеки (вроде React, Vue или JQuery) использовать нельзя, только vanilla javascript.
- Конкретных требований к дизайну отдельных элементов нет - цвета, шрифты и размерности остаются на выбор исполнителя (при условии, что итоговый результат будет приближен к мокапам).
- Никакого "бэкэнда" и сохранения состояний реализовывать не нужно
- Валидацию и какие-либо проверки для полей ввода (кроме промокода) делать не обязательно
- Делать адаптивы не нужно, только десктопы с шириной на выбор исполнителя
- Мокапы (то как должен выглядеть результат):
- Сборка
- Картинки для товаров
Итоговый результат будет оцениваться по следующим параметрам:
- чистота и понятность кода
- корректность работы
- аккуратность и "опрятность" оформления
- кроссбраузерность (последние версии основных десктопных браузеров)
- композиция и архитектура кода (насколько эффективно отдельные части подключены и взаимодействуют друг с другом)
- валидность кода
- универсальность (можно ли будет переиспользовать код, например переключение между состояниями)
- гибкость (легко ли впоследствии будет внести изменения)
- документация (комментарии и пояснения)
- история изменений (git)
- Декомпозировать задачу на небольшие части (в идеале - каждая часть это отдельный коммит)
- Настроить git-репозиторий
- Установить сборку
- Подготовить сборку к работе (настройки, переменные, папки и т.п.)
- Сделать вёрстку отдельных компонентов
- Создать страницу, собрать на ней из компонентов нужные "шаги" оформления заказа
- Написать код для работы переходов между шагами и другой "динамики"
- Почистить и задокументировать (комментарии, пояснения) код
- Передать ссылку на финальный репозиторий (код из репозитория должен работать после скачивания, установки и запуска)
Результат должен быть передан в виде ссылки на Gitlab или Github репозиторий. Приветствуется создание небольших коммитов (с описанием при необходимости), чтобы в конечном итоге список коммитов представлял собой понятную последовательную историю работы над проектом.