masterwork1995 / image-finder Goto Github PK

Критерии приема Созданы репозитории goit-js-hw-13-image-finder. При сдаче домашней работы есть две ссылки для каждого проекта: на исходные файлы и рабочую страницу на GitHub pages. При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и предупреждений Имена переменных и функций понятные, описательные Проект собран с помощью parcel-project-template Код отформатирован с помощью 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-элемент следующей структуры. Можно использовать шаблонизацию.

thumb_up 1108

visibility 320321

comment 129

cloud_download 176019

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

Страница должна автоматически плавно проскроливаться после рендера изображений, чтобы перевести пользователя на следующие загруженные изображения. Используй метод Element.scrollIntoView().

const element = document.getElementById('.my-element-selector'); element.scrollIntoView({ behavior: 'smooth', block: 'end', }); Дополнительно Можно добавить плагин нотификаций, например pnotify, и показывать нотификации на результат HTTP-запросов Можно добавить функционал отображения большой версии изображения через плагин модального окна, например basicLightbox, при клике на изображение галереи Вместо кнопки Load more можно сделать бесконечную загрузку при скроле используя Intersection Observer.