Каталог изображений (gif)

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

Приложение "каталог изображений". Приложение состоит из 1 страницы на которой находятся следующие элементы:

• Текстовое поле ввода тега
• Кнопка "Загрузить"
• Кнопка "Очистить"
• Кнопка "Группировать" / "Разгруппировать"
• Список изображений

Инструкция к использованию:

• Заполнение поля тега.
• Затем происходит одно из следующего:
  • Если по тегу ничего не найдено — отображается всплывающее уведомление 'По тегу ничего не найдено'".
  • Если произошла http ошибка — отображается всплывающее уведомление 'Произошла http ошибки'".
  • При успешном получении данных изображения — добавляется изображение в список изображений.
• Нажатие на кнопку "Загрузить". Если поле ввода тега пустое - отображается всплывающее уведомление "заполните поле 'тег'", иначе происходит http запрос к api giphy, на время загрузки кнопка блокируется, а текст меняется на "Загрузка...".
• При нажатии на кнопку "Очистить" — поле ввода тега и список изображений очищается.
• При нажатии на кнопку "Группировать" — изображения группируются по тегу, тег пишется как заголовок над группой. Текст кнопки меняется на "Разгруппировать".
• При нажатии на кнопку "Разгруппировать" — изображения отображаются друг за другом по очерёдности загрузки. Текст кнопки меняется на "Группировать".
• При нажатии на изображение поле ввода тега заполняется тегом, по которому искалось изображение.
• При указании значения “delay” выполняются запросы с рандомным тегом (не более 10 символов), между запросами задержка в 5 секунд.
• При вводе значений через запятую (“cat, dog”) считается что мы указали составной тэг.
• Ввод любых символов в поле кроме букв латинского алфавита и “,” запрещен.

Использованные технологии и инструменты:

---

Перед запуском необходимо:

1. Установить Node.js:

   Установить Node.js (ссылка)

2. Обновить пакеты:

$ npm i

---

Запуск проекта:

• Запуск локального сервера:

$ yarn start (npm start)