# Неделя #4: Виджеты страницы

# Задачи на неделю:

Изучить учебные материалы
Обеспечить функционированием виджеты страницы
- Вертикальный аккордеон (секция с командой)
- Слайдер
- Модальное окно
- Слайдшоу в секции отзывов
Обеспечить обработку ответа от сервера в форме заказа

# Как все успеть

# 🗓 Понедельник

Смотрим видео-курс по jQuery

Хорошим опытом будет найти аналоги функций jQuery в ванильном JS. Если аналогов найти не удалось - попробуйте реализовать эти функции самостоятельно.

# 🗓 Вторник

Реализуем функционирование вертикального аккордеона

Пояснения к тз

Пояснения к верстке секции

Все элементы внутри подобных блоков идентичны по своей верстке.
Блок отмеченный знаком # находится во всех элементах аккордеона, но он скрыт по умолчанию (либо display: none, либо height: 0, с добавлением overflow: hidden - второй вариант предпочтительнее так как впоследствии мы будем изменять высоту блока динамически)
Функционирование можно обеспечить двумя способами
1. Необходимо завести класс модификатор, который будет навешиваться как дополнительный класс на элемент аккордеона и тем самым менять в нем отображение на то, которое соответствует активному элементу, а именно
- Заголовок становится желтым
- Треугольник “смотрит” вверх
- Секция # отображена
1. По клику измеряем высоту спрятанного блока и отображаем этот блок путем установления высоты на блок обертку (изначально обертка имеет высоту 0, что и прячет блок с текстом)

# 🗓 Среда

Реализуем слайдер на JavaScript

# Функционирование слайдера

Пройденного материала будет достаточно для реализации этого слайдер ванильным JS либо при помощи jQuery. Но в качестве опыта подключите готовую библиотеку слайдера и настройте ее для корректной работы. Популярные бибилиотеки для этой задачи:

# 🗓 Четверг

Реализуем слайдшоу

Пояснения к тз

# Реализация

Виджет представляет из себя 2 списка. Список с контентом и список с аватарами

По умолчанию отображен только один элемент в списке контентом
При клике на элемент из списка аватаров нужно найти необходимый элемент в списке с контентом и отобразить его
Связать элементы (из списков) друг с другом можно несколькими способами:
- По порядку - нажали на первый элемент, значит нужно отобразить первый
- Задать контеным элементам id, и аватарам в href (если это ссылка) прописать соответсвующий id для открытия элемента

# 🗓 Пятница

Смотрим подготовительное видео по работе с Ajax

Реализуем работу формы заказа

Сервер отправки почты расположен по адресу: https://webdev-api.loftschool.com/sendmail (при отправке, убедитесь что используете именно протокол https, а не http)

Метод отправки - POST

Сервер ждет следующие параметры:

1. name - имя заказавшего
2. phone - телефон заказавшего
3. comment - комментарий
4. to - почта (в формате валидного адреса email)

В ответ на такой AJAX запрос сервер ответит данными в формате JSON В ответе будет содержаться информация о том удалось ли отправить сообщение (поле status в ответе), и текcт сообщения (либо текст ошибки)

Так как сервер ждет JSON ему нужно об этом сообщить. Т.е после того как вы сделали .open() нужно добавить в запрос заголовок с типом контента:

xhr.open('...');  
xhr.setRequestHeader('content-type', 'application/json');

Сервер работает в режиме эмуляции (для того что бы этим сервером нельзя было воспользоваться как спам-сервисом) поэтому само письмо на почту не придет.

Перед отправкой запроса обязательно проверьте нужные поля на пустые значения. Что бы не отправлять заведомо не верный запрос.

Реализуем функционирование модального окна в секции Заказ (в зависимоcти от пришедшего ответа с сервера необходимо отобразить соответствующее всплывающее окно)

Сервер возвращает случайным образом либо успешный ответ либо ошибку

Итог работы

Виджеты страницы работают исправно (аккордеон, слайдер, модальное окно, слайдшоу)
В зависимости от ответа со стороны сервера - в модальном окне появляются разные сообщения (отправка удалась/произошла ошибка)