/goit-js-hw-13-image-finder

Primary LanguageJavaScript

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

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

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

{
  "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.