05

Fetch

Fetch API

Цель: получить навыки использования Fetch API и Storage, изучить формат обмена данными JSON.

Подготовка

Просмотрите документацию Fetch API. Познакомьтесь с функцией fetch() и объектом Response. Повторите информацию о протоколе http и сообщениях.

Изучите описание формата данных JSON и работу с ним с использованием глобального объекта JSON.

Прочитайте про async/await и связь асинхронных функций с объектом Promise. Посмотрите про проблему цветных функций.

Изучите работу с объектом Storage и localStorage в частности.

Источники

Выполнение

Как и в прошлых работах, переключитесь на ветку main, убедитесь, что все настройки инструментов и необходимые зависимости есть. Если нет, то вернитесь к прошлым работам и настройте.

Создайте ветку lab5 и работайте на ней. Создайте документ html с H1 заголовком «ФИО - Лабораторная работа №5. В созданный документ html добавьте две секции: для галереи и отправки температуры и выполните задания описанные ниже.

Проведите ручное тестирование в браузере, отформатируйте документы, убедитесь, что нет замечаний от ESLint и зафиксируйте результаты работы с помощью системы контроля версий git и отправьте ветку lab5 в репозиторий на github.

Тост

Создайте элемент всплывающего уведомления (toasts), который отображается на странице внизу справа и показывает переданную ему информацию. Закрывается он по нажатию на соответствующую кнопку. Отображение и скрытие должно происходить плавно. Также он должен иметь разные стили для отображения ошибки (красный фон) и сообщения (зеленый фон). Не забывайте про контрастность и доступность, а также про отзывчивость (RWD).

Галерея

Сервер с документацией.

Для галереи после загрузки страницы отправить запрос на получение изображений и отобразить их на странице. Если возникают какие-либо ошибки осуществить максимум 3 повторных запроса с небольшим интервалом. Если данные так и не удалось получить, то оповестить об этом пользователя с помощью компонента тоста. На время пока ожидается ответ от сервера, показать загрузчик, после получения ответа загрузчик должен замениться на контент или должно появится сообщение об ошибке. Если пришел пустой массив, то на месте галереи должен отображаться текст “Изображения не найдены”.

В начало этой же секции, добавить кнопку обновления галереи, при нажатии на которую отправляет запрос на получение изображений.

Все блоки изображений с подписями должны выглядеть одинаково, не смотря на размер изображения или длину текста. В один ряд помещается 4-изображения (используйте grid).

Температура

Сервер с документацией.

В этой секции добавьте форму для ввода номера аудитории и температуры. Не забудьте про доступность. Для отправки данных из формы предотвратите стандартное поведение формы, сформируйте собственный post-запрос с помощью fetch. Не забудьте в заголовках указать тип передаваемого контента (Content-Type) и отправить данные с правильными типами (строка и число). На время ожидания ответа от сервера заблокируйте возможность отправлять новые запросы из формы. При успешной обработке данных на сервере с помощью тоста выведите сообщение из ответа и очистите форму. При ошибке, выведите сообщение ошибки в toast, но форму не очищайте.

Переключение темы

Подготовьте минимальные стили для светлой и темной тем (цвета можно взять например у DaisyUI в разделе List of themes). Добавьте хедер к странице и в нем кнопку для переключения светлой и темной темы. При перезагрузке страницы должна отображаться последняя выбранная тема (подсказка - localStorage) и не происходило “мерцания” темы, когда сначала отображается одна тема, а потом подгружается сохраненная (подсказка - необходимо воспользоваться порядком загрузки и выполнения кода JS). Рекомендуется использовать css переменные и переключение классов.

Требования

  • HTML код валиден.
  • Весь код отформатирован.
  • Отсутствуют ошибки ESLint.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.
  • Отсутствуют анонимные функции при использовании метода .addEventListener().
  • Текст в интерфейсе русский.
  • Отсутствуют ошибки в lighthouse по критерию доступности.