# Неделя #5: Работа с сервисами
# Задачи на неделю:
- Реализовать горизонтальный аккордеон
- Подключить интерактивную карту google / yandex
- Реализовать OnePageScroll
- Разделить структуру проекта на Dev и Prod
- Реализовать видео-плеер при помощи HTML5 Video API
# Как все успеть
# 🗓 Понедельник
Реализуем функционирование горизонтального аккордеона
Пояснения к верстке секции
- Механика работы схожа с вертикальным аккордеоном
- Отличие этого элемента в том что секции будут открыты путем увеличения ширины, а не высоты.
- Блок # находится во всех элементах аккордеона (но по умолчанию у него width: 0; overflow: hidden) а при добавлении активного класса ширина увеличивается до заданной
- Так же необходимо предусмотреть открытие элемента на мобильной версии, т.е если ширина экрана меньше 768px то пункт должен открываться ровно до края окна
# 🗓 Вторник
Реализуем функционирование OnePageScroll
# Советы по реализации
- По собыию wheel определить значение св-ва event.deltaY (так можно понять направление скролла)
- Сдвигать секции нужно св-вом translate
- Определить активную секцию можно навесив класс
- Активировать функционал на мобильных устройствах поможет библотека touchSwipe.js (либо аналоги)
- Определить что сайт открыт с мобильного устройства можно при помощи библиотеки MobileDetect
# 🗓 Среда
Смотрим видео с реализацией видео-плеера средствами YouTube Iframe API
Реализуем секцию с видеоплеером с применением HTML5 Api. Описание функций можно посмотреть, например, вот здесь
# 🗓 Четверг
Смотрим видео по использованию Yandex Карты
Подключаем интерактивную карту Яндекс/Google (любую на выбор)
Стилизуем маркеры карты, согласно макету
# 🗓 Пятница
Смотрим видео-курс по Gulp
Устанавливаем Gulp и необходимые пакеты к нему
Разделяем структуру проекта на Dev и Prod
# 🗓 Остальное время до дедлайна
Правим виджеты под корректную работу на мобильных устройствах (если это необходимо)
Приводим проект в готовое состояние, и подтягиваем долги
Итог работы
- Полностью готовый проект лендинг-страницы
- Верстка меняет свой лейаут в зависимости от разрешений экрана
- Подключена интерактивная карта google либо яндекс
- Функционал смены экранов - One Page Scroll
- Все виджеты, дропдауны (выпадающие меню), а также смена экранов лендинга корректно работают как на десктопе так и в мобильных браузерах
- Форма отправляет данные на сервер, и корректно обрабатывает ответ
- Структура проекта разделена на Dev и Prod