Домашнє завдання №12

Створи репозиторій goit-js-hw-12
Збери проєкт за допомогою Vite. Ми підготували для тебе готову збірку з усіма додатковими налаштуваннями проєкту та рекомендуємо використовувати саме її.
Для HTTP-запитів використовуй бібліотеку axios.
Прочитай завдання і виконай його в редакторі коду.
Переконайся, що код відформатований за допомогою Prettier, а в консолі відсутні помилки й попередження під час відкриття живої сторінки завдання.
Здай домашнє завдання на перевірку.

Формат здачі: Домашня робота містить два посилання: на вихідні файли і робочу сторінку на GitHub Pages.

Завдання — Пошук зображень

Використовуй код із домашньої роботи попереднього модуля та доповни код застосунку пошуку зображень новим функціоналом.

Рефакторинг

Додай у проєкт бібліотеку Axios для роботи з HTTP-запитами та виконай рефакторинг, замінивши нею використання fetch.

Використовуй синтаксис async/await для роботи з асинхронними запитами. Виконай рефакторинг свого коду.

Пагінація

Pixabay API підтримує пагінацію та надає параметри page і per_page. Зроби так, щоб у кожній відповіді при пошуку зображень приходило 40 об'єктів (за замовчуванням 20).

Початкове значення параметра page повинно бути 1.
З кожним наступним запитом його необхідно збільшити на 1.
У разі пошуку за новим ключовим словом значення page потрібно повернути до початкового, оскільки буде пагінація для нової колекції зображень.

Додай в HTML-документі після галереї розмітку кнопки з текстом Load more, за кліком на яку необхідно виконувати запит за наступною групою зображень і додавати розмітку до вже існуючих елементів галереї. Для цього при сабміті форми тобі необхідно зберігати те, що ввів користувач у глобальну змінну.

Поки в галерії нема зображень, кнопка повинна бути прихована.
Після того як у галереї з'являються зображення, кнопка з'являється в інтерфейсі під галереєю.
При повторному сабміті форми кнопка спочатку ховається, а після отримання результатів запиту знову відображається за потреби.
Перенеси індикатор завантаження під кнопку завантаження додаткових зображень.

Кінець колекції

У відповіді бекенд повертає властивість totalHits — загальна кількість зображень, які відповідають критерію пошуку (для безкоштовного акаунту). Якщо користувач дійшов до кінця колекції, ховай кнопку Load more і виводь повідомлення з текстом "We're sorry, but you've reached the end of search results.".

Прокручування сторінки