R50 bfa4a55de51e8e3708f8464586f44f4f
Frontend-разработчик

Тренировочный проект - сервис размещения и просмотра объявлений

Добавлено 06 авг 2019 в 16:18
Сервис предоставляет пользователям возможность размещать объявления о своей недвижимости или просматривать уже размещённые объявления.

JS-код реализующий разную функциональность сервиса разбит на соответствующие независимые модули (использованы IIFE), отправка и получение данных с сервера реализованы c помощью AJAX для взаимодействия с сервером без перезагрузки страницы.

На JS реализовано:
  • активация карты и формы создания объявления при первом перетаскивании главного пина на карте;
  • загрузка данных с сервера о размещённых объявлениях (при активации карты и формы);
  • создание пинов объявлений на основе полученных данных и их отображение на карте (при успешной загрузке данных с сервера), активация фильтров отображаемых пинов;
  • сброс страницы в изначальное неактивное состояние без перезагрузки страницы и отображение сообщения об ошибке загрузки объявлений (при ошибке загрузки данных с сервера);
  • перемещение главного пина в допустимом диапозоне карты, установка этого диапозона, отображение координат острого конца главного пина в поле "Адрес" формы создания объявления;
  • открытие карточки объявления при нажатии на пин объявления и её закрытие при нажатии на крестик карточки, при нажатии на ESC, и при изменении значений в фильтрах, смена текущей карточки при нажатии на другой пин объявления;
  • фильтрация отображаемых пинов объявлений при изменении значений в фильтрах, отображение только тех пинов, объявления которых соответствуют выставленным фильтрам;
  • устранение дребезга при быстрой смене значений фильтров (пины фильтруются только если в течении 500мс значения фильтров не сменились);
  • синхронизация полей "Тип жилья" и "Цена за ночь", изменение минимальной допустимой цены при изменении типа жилья;
  • синхронизация полей "Время заезда и выезда", при изменении времени такое же значение выставляется в противоположном поле;
  • синхронизация полей "Кол-во комнат" и "Количество мест", изменение диапозона допустимых значений количества мест при изменении количества комнат;
  • отображение миниатюр выбранных фотографий в полях "Ваша фотография" и "Фотографии жилья" (с помощью API FileReader);
  • возможность сортировать выбранные фотографии жилья путём перетаскивания миниатюр (с помощью API Drag and drop);
  • валидация формы объявления при попытке отправки формы, отмена отправки формы при незаполненных обязательных полях или при некорректных значениях в полях, выделение всех этих полей кастомной красной рамкой, удаление красной рамки после изменения некорректного значения в поле;
  • установка кастомного сообщения об ошибке на поле "Количество мест" при его некорректном значении;
  • отправка данных формы объявления на сервер (при успешной валидации формы), сброс страницы в изначальное неактивное состояние без перезагрузки страницы, отображение сообщения об успешном размещении объявления (при успешной отправке данных), отображение сообщения об ошибке размещения объявления (при ошибке отправки данных).

Ссылка на проект на GitHub Pages:
https://maxeinsof.github.io/939001-keksobooking-17/
38869658af