Читать на других языках: Русский, Українська.

Критерии приема

Созданы репозитории goit-js-hw-13-image-finder.
При сдаче домашней работы есть две ссылки для каждого проекта: на исходные файлы и рабочую страницу на GitHub pages.
При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и предупреждений
Имена переменных и функций понятные, описательные
Проект собран с помощью Webpack
Код отформатирован с помощью Prettier
Добавь минимальную стилизацию
Есть файл apiService.js с дефолтным экспортом объекта отвечающего за логику HTTP-запросов к API

Задание - поиск изображений

Напиши небольшое приложение поиска и просмотра изображений по ключевому слову

Инструкции Pixabay API

Для HTTP-запросов используй публичный Pixabay API. Зарегистрируйся и получи ключ.

URL-строка запроса:

https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=что_искать&page=номер_страницы&per_page=12&key=твой_ключ

Pixabay API поддерживает пагинацию, пусть в ответе приходит по 12 объектов, установлено в параметре per_page. По умолчанию параметр page равен 1. При каждом последующем запросе page увеличивается на 1, а при поиске по новому ключевому слову необходимо сбрасывать его значение в 1.

Каждое изобаржение описывается объектом.

{
  "comments": 78,
  "downloads": 63296,
  "favorites": 558,
  "id": 1508613,
  "imageHeight": 2135,
  "imageSize": 1630104,
  "imageWidth": 2894,
  "largeImageURL": "https://pixabay.com/get/57e5d54b4c53af14f6da8c7dda793376173cd8e7524c704c702873dc9f44c551_1280.jpg",
  "likes": 575,
  "pageURL": "https://pixabay.com/photos/cat-animal-cat-portrait-cat-s-eyes-1508613/",
  "previewHeight": 110,
  "previewURL": "https://cdn.pixabay.com/photo/2016/07/10/21/47/cat-1508613_150.jpg",
  "previewWidth": 150,
  "tags": "cat, animal, cat portrait",
  "type": "photo",
  "user": "cocoparisienne",
  "userImageURL": "https://cdn.pixabay.com/user/2018/11/26/11-06-29-714_250x250.jpg",
  "user_id": 127419,
  "views": 127450,
  "webformatHeight": 472,
  "webformatURL": "https://pixabay.com/get/57e5d54b4c53af14f6da8c7dda793376173cd8e7524c704c702873dc9f44c551_640.jpg",
  "webformatWidth": 640
}

Тебе интересны следующие свойства:

webformatURL - ссылка на маленькое изображение для списка карточек
largeImageURL - ссылка на большое изображение (смотри пункт 'дополнительно')
likes - количество лайков
views - количество просмотров
comments - количество комментариев
downloads - количество загрузок

Форма поиска

Создает DOM-элемент следующей структуры. Можно использовать шаблонизацию.

<form class="search-form" id="search-form">
  <input
    type="text"
    name="query"
    autocomplete="off"
    placeholder="Search images..."
  />
</form>

Галерея изображений

Создает DOM-элемент следующей структуры.

<ul class="gallery">
  <!-- Список <li> с карточками изображений -->
</ul>

Карточка изображения

Создает DOM-элемент следующей структуры.

<div class="photo-card">
  <img src="" alt="" />

  <div class="stats">
    <p class="stats-item">
      <i class="material-icons">thumb_up</i>
      1108
    </p>
    <p class="stats-item">
      <i class="material-icons">visibility</i>
      320321
    </p>
    <p class="stats-item">
      <i class="material-icons">comment</i>
      129
    </p>
    <p class="stats-item">
      <i class="material-icons">cloud_download</i>
      176019
    </p>
  </div>
</div>

Для иконок используются Material icons. Для их корректной работы достаточно в HTML-файле добавить ссылку на веб-шрифт.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Или добавив npm-пакет material-design-icons и импортировав веб-шрифт в index.js.

Кнопка 'Load more'

При нажатии на кнопку Load more должна догружаться следующая порция изображений и рендериться вместе с предыдущими.

Страница должна автоматически плавно проскроливаться после рендера изображений ровно на один экран, чтобы перевести пользователя на начало загруженных изображений. Используй window.scrollTo().

Дополнительно

Можно добавить плагин нотификаций, например pnotify, и показывать нотификации на результат HTTP-запросов
Можно добавить функционал отображения большой версии изображения через плагин модального окна, например basicLightbox, при клике на изображение галереи
Вместо кнопки Load more можно сделать бесконечную загрузку при скроле используя Intersection Observer.

Niko-Yea/image-finder