/goit-js-hw-11

Primary LanguageCSS

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

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

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

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

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

Форма пошуку

Форма пошуку міститься в HTML-документі. Користувач буде вводити рядок для пошуку в текстове поле, а за сабмітом форми необхідно виконувати HTTP-запит із цим пошуковим рядком

HTTP-запити

Для бекенду використовуй публічний API сервіс Pixabay. Зареєструйся, отримай свій унікальний ключ доступу і ознайомся з документацією.

Список параметрів рядка запиту, які тобі обов'язково необхідно вказати:

  • key — твій унікальний ключ доступу до API.
  • q — слово для пошуку. Те, що буде вводити користувач.
  • image_type — тип зображення. Потрібні тільки фотографії, тому постав значення photo.
  • orientation — орієнтація фотографії. Постав значення horizontal.
  • safesearch — фільтр за віком. Постав значення true.

У відповіді буде об’єкт із декількома властивостями, в одному з яких буде масив зображень, що задовольнили критерії параметрів запиту.

Якщо бекенд повертає порожній масив, значить, нічого підходящого не було знайдено. У такому разі показуй повідомлення з текстом "Sorry, there are no images matching your search query. Please try again!". Для повідомлень використовуй бібліотеку iziToast.

Для того щоб підключити CSS код бібліотеки в проєкт, необхідно додати ще один імпорт, крім того, що описаний у документації.

Галерея і картки зображень

Елемент галереї (список однотипних елементів) міститься в HTML-документі, і в нього необхідно додавати розмітку карток зображень після HTTP-запитів.

Кожне зображення описується об'єктом, з якого тобі цікаві тільки такі властивості:

  • webformatURL — посилання на маленьке зображення для списку карток у галереї
  • largeImageURL — посилання на велике зображення для модального вікна
  • tags — рядок з описом зображення. Підійде для атрибута alt
  • likes — кількість вподобайок
  • views — кількість переглядів
  • comments — кількість коментарів
  • downloads — кількість завантажень

Перед пошуком за новим ключовим словом необхідно повністю очищати вміст галереї, щоб не змішувати результати запитів.

Бібліотека SimpleLightbox

Додай відображення великої версії зображення з бібліотекою SimpleLightbox для повноцінної галереї.

Для того щоб підключити CSS код бібліотеки в проєкт, необхідно додати ще один імпорт, крім того, що описаний у документації.

  • У розмітці необхідно буде обгорнути кожну картку зображення в посилання, як зазначено в документації в секції «Markup».
  • Бібліотека містить метод refresh(), який обов'язково потрібно викликати щоразу після додавання нових елементів до галереї.

Індикатор завантаження

Додай елемент, що сповіщає користувача про те, що йде процес завантаження зображень з бекенду. Завантажувач має з’являтися прямо перед початком HTTP запиту та зникати після того, як запит завершився.

Замість банального тексту, як це реалізовано в демовідео, можна використовувати бібліотеку з гарними індикаторами завантаження, наприклад, css-loader. Відеоінструкція з використання цієї бібліотеки є в README.md їхнього репозиторію.