Cryptostars

Ссылка на проект

Техническое задание

Макет проекта по ссылке.
Начальное состояние проекта по ссылке.
Все необходимые данные загружаются с сервера, сервер доступен по ссылке.
Проект должен соответствовать критериям качества.

Описание проекта

Криптобиржа Cryptostar — сервис покупки криптовалюты KEKS онлайн и за наличный расчёт.

Пояснение для учащихся

Cryptostar — одностраничный сайт с двумя слоями информации:

• Первый слой с данными о продавцах и покупателях (далее именуемых контрагентами) с возможностью просмотра списком или на карте.
• Второй слой — форма обмена в модальном окне. Модальное окно доступно при клике на кнопку обменять.

Описание функциональности

1. Основной слой

Основной слой имеет два состояния:

• продавцы или покупатели показаны списком
• продавцы показаны на карте

1.1 Продавцы и покупатели показаны списком

• Пользователи биржи могут продавать, могут покупать валюту. При переключении той или иной кнопки-таба должен формироваться список возможных продавцов и покупателей.
• Верифицированные (проверенные биржей) контрагенты помечены иконкой-звёздочкой у имени.
• При выборе чекбокса показать только верифицированных пользователей, в списке остаются покупатели или продавцы только с этим признаком.
• В списке отображаются имя, валюта, курс и лимиты сделок контрагента.
• Для продавцов указываются платёжные системы.
• Значение минимального размера сделки для контрагентов приходит с сервера в рублях. Максимальное значение лимита сделки для продавца зависит от количества KEKS, которая у него есть на счету, и курса продавца. Для покупателя максимальный лимит сделки — сумма рублей на его счету.

1.2 Продавцы показаны на карте

• При выборе таба показать на карте метками на карте отображаются только те продавцы, у которых указан способ оплаты «за наличные».
• Для каждого такого продавца с сервера будут приходить координаты широта и долгота
• Координаты заданы на карте Санкт-Петербурга. Начальные координаты lat: 59.92749, lng: 30.31127
• При клике по метке открывается балун с описанием продавца. API балуна предоставляет Leaflet.
• Верифицированные (проверенные биржей) продавцы отмечаются меткой особого цвета.
• При выборе чекбокса показать только верифицированных пользователей, на карте остаются продавцы только с этим признаком.

! Фильтр сквозной, а значит, если пользователь при просмотре продавцов списком выбрал чекбокс показать только верифицированных пользователей, при переключении на карту, фильтр остаётся применённым.

2. Модальный слой

2.1 Общие требования к модальному слою

• Для каждого покупателя или продавца доступна кнопка обменять. При клике на кнопку открывается модальное окно. При открытии модального окна взаимодействие со страницей блокируется. Запрещён скролл страницы позади модального окна.
• Модальное окно закрывается по клику на «Х», по клику на оверлей и по нажатию клавиши ESC. При закрытии окна все введённые пользователем данные удаляются (поля очищаются).

2.2 Покупка валюты

• При вводе данных в поле оплата в поле зачисление должны быть переданы данные по количеству KEKS, подсчитанные с учётом курса для конкретного пользователя.
• При вводе данных в поле зачисление в поле оплата появляется итоговая сумма за данное количество KEKS.
• Для ввода данных доступны оба поля: при вводе данных в одно поле — второе пересчитывается автоматически.
• Необходимо задать функцию для совершения операции расчёта количества валюты по указанному курсу.
• Для полей оплата и зачисление доступна функция обменять всё. То есть купить все KEKS, что есть на счету продавца, или KEKS на все деньги, что есть у пользователя. Необходимо описать правила валидации, которые не дадут пользователю купить валюты больше или меньше, чем установлено порогом, а также по иному курсу.
• Для поля оплата есть ограничения по максимальным и минимальным лимитам в рублях.
• При вводе суммы, введённые или подсчитанные данные должны валидироваться, в случае ошибки, поле выделяется красным цветом и появляется соответствующее сообщение об ошибке.
• Поле Платёжная система — это выпадающий список. Информация для заполнения поля берётся из данных продавца.
• При выборе покупки за наличный расчёт поле Номер банковской карты остаётся пустым. Во всех остальных случаяех, подставляется соответсвующий номер карты. Ручное редактирование поля запрещено.
• Информация для поля Номер криптокошелька берётся из данных пользователя. Ручное редактирование поля запрещено.
• Поле Платёжный пароль не должно быть пустым. В противном случае поле не должно проходить валидацию. С сервера также будет приходить ошибка, если пароль неверный. Верный пароль — 180712.

2.3 Продажа

Информация для заполнения поля Платёжная система берётся из данных пользователя, а информация для поля Номер криптокошелька берётся из данных контрагента.
При покупке и продаже валюты валидация полей происходит одинаково.

2.4 Ошибка введённых значений

Страница реагирует на неправильно введённые значения в форму. Если данные, введённые в форму, не соответствуют описанным, форму невозможно отправить на сервер. При попытке отправить форму с неправильными данными отправки не происходит, а пользователю показываются ошибки под полями ввода, в которых пользователь ошибся (для проверки данных используется сторонняя библиотека Pristine).
В случае отсутствия ошибок данные отправляются и рядом с кнопкой обменять появляется сообщение «Данные успешно отправлены».
Если пользователю каким-то образом удалось отправить на сервер невалидную форму, то сервер вернёт ошибки. Также сервер в момент отправки формы может быть недоступен, что тоже нужно считать ошибкой. В таком случае под кнопкой обменять нужно показать сообщение «Ошибка заполнения формы».

3. API и Сервер

• Данные с сервера приходят в формате JSON.
• Данные о пользователе получаем GET-запросом на адрес https://cryptostar.grading.htmlacademy.pro/user
• Данные о контрагентах получаем GET-запросом на адрес https://cryptostar.grading.htmlacademy.pro/contractors
• Данные на сервер отправляются с **типом multipart/form-data методом POST на адрес https://cryptostar.grading.htmlacademy.pro/
• Поля, которые ожидает сервер (имена полей, их нужно указать в атрибутах name):
  • type — тип сделки (BUY или SELL)
  • contractorId — идентификатор контрагента
  • sendingCurrency — название валюты, которую отправляет пользователь (KEKS или RUB)
  • sendingAmount — количество валюты, которое отправляет пользователь
  • exchangeRate — курс контрагента
  • receivingCurrency — название валюты, которую отправляет контрагент (KEKS или RUB)
  • receivingAmount — количество валюты, которое отправляет контрагент
  • paymentMethod — выбранный способ оплаты
  • paymentPassword — платёжный пароль
• Валидацию полей необходимо провести на стороне клиента, сервер только страхует
• В проекте используется только API библиотек Pristine и Leaflet

4. Ошибка сервера и приёма данных

Если при загрузке сайта сервер недоступен, нужно показать заглушку (в вёрстке предусмотрен такой вариант).

5. Дополнительные данные

В файле index в комментариях к коду вы можете найти дополнительную информацию по работе с некоторыми темплейтами и стилями.

---

Репозиторий создан для обучения на интенсивном онлайн‑курсе «JavaScript. Профессиональная разработка веб-интерфейсов» от HTML Academy.