https://github.com/deemon13/goit-js-hw-11

Search pictures using API Pixabay. Some libraries: axios for requests, notiflix for notifications, simplelightbox for gallery
https://github.com/deemon13/goit-js-hw-11

async await axios css error form gallery-images html javascript notiflix parcel promise request response rest-api scss search simplelightbox smooth-scrolling vanilla-javascript

Last synced: 3 months ago
JSON representation

Search pictures using API Pixabay. Some libraries: axios for requests, notiflix for notifications, simplelightbox for gallery

• Host: GitHub
• URL: https://github.com/deemon13/goit-js-hw-11
• Owner: Deemon13
• Created: 2021-11-14T03:01:15.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-11-26T03:58:28.000Z (over 4 years ago)
• Last Synced: 2025-10-29T11:04:44.526Z (9 months ago)
• Topics: async, await, axios, css, error, form, gallery-images, html, javascript, notiflix, parcel, promise, request, response, rest-api, scss, search, simplelightbox, smooth-scrolling, vanilla-javascript
• Language: SCSS
• Homepage: https://deemon13.github.io/goit-js-hw-11/
• Size: 511 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Фронтенд часть приложения поиска и просмотра изображений по ключевому слову.

API.

Использован публичный API сервиса Pixabay, возвращающий массив изображений удовлетворивших критериям

параметров запроса.

Используемые свойства: webformatURL - ссылка на маленькое изображение для списка карточек.

largeImageURL - ссылка на большое изображение. tags - строка с описанием изображения. Подойдет для

атрибута alt. likes - количество лайков. views - количество просмотров. comments - количество

комментариев. downloads - количество загрузок.

БИБЛИОТЕКИ.

Для отображения большой версии изображения использована библиотека SimpleLightbox.

Для уведомлений использована библиотека notiflix.

ИНТЕРФЕЙС.

Форма, в которой пользователь будет вводить строку для поиска в текстовое поле, а при сабмите формы

необходимо выполнять HTTP-запрос.

После первого запроса при каждом новом поиске выводится уведомление в котором написано сколько всего

нашли изображений.

Если ничего подходящего найдено небыло, выводится уведомление о нулевом результате.

Pixabay API поддерживает пагинацию и предоставляет параметры page и per_page. В каждом ответе

приходит 40 объектов.

Есть кнопка (Load more), при клике по которой выполняется запрос за следующей группой изображений и

добавлется в разметку к уже существующим элементам галереи.

Если пользователь дошел до конца коллекции, кнопка скрывается и выводится уведомление о достижении

окончании галереи.

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