Домашнє завдання №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.".

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

Зроби плавне прокручування сторінки після запиту і відтворення кожної наступної групи зображень. Для цього отримай у коді висоту однієї карточки галереї, використовуючи функцію getBoundingClientRect. Після цього використовуй метод window.scrollBy для прокрутки сторінки на дві висоти карточки галереї.