https://github.com/lesiaukr/goit-advancedjs-hw-04

Master's degree homework JS advanced course - | Pixabay API | HTTP requests| CRUD| Infinity scroll| | SimpleLightbox |Pagination
https://github.com/lesiaukr/goit-advancedjs-hw-04

axios crud goit-advancedjs-hw-04 http-requests infinity-scroll pagination pixabay simplelightbox

Last synced: about 2 months ago
JSON representation

Master's degree homework JS advanced course - | Pixabay API | HTTP requests| CRUD| Infinity scroll| | SimpleLightbox |Pagination

• Host: GitHub
• URL: https://github.com/lesiaukr/goit-advancedjs-hw-04
• Owner: LesiaUKR
• Created: 2023-11-24T17:36:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-29T13:22:07.000Z (over 1 year ago)
• Last Synced: 2025-01-29T23:16:31.963Z (3 months ago)
• Topics: axios, crud, goit-advancedjs-hw-04, http-requests, infinity-scroll, pagination, pixabay, simplelightbox
• Language: JavaScript
• Homepage: https://lesiaukr.github.io/goit-advancedjs-hw-04/
• Size: 1.91 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Критерії приймання

- Створено репозиторій `goit-advancedjs-hw-04`.

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

  `GitHub Pages`.

- В консолі відсутні помилки і попередження під час відкриття живої сторінки

  завдання.

- Проект зібраний за допомогою

  [vanilla-app-template](https://github.com/goitacademy/vanilla-app-template).

- Для HTTP-запитів використана бібліотека [axios](https://axios-http.com/).

- Використовується синтаксис `async/await`.

- Для повідомлень використана бібліотека

  [ iziToast](https://izitoast.marcelodolza.com/).

- Код відформатований за допомогою `Prettier`.

#### Формат оцінювання:

- Оцінка від 0 до 100

#### Формат здачi:

- Два посилання: на вихідні файли і робочу сторінку на `GitHub Pages`

  Прикрiплений файл репозиторію у форматi zip

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

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

словом. Додай оформлення елементів інтерфейсу. Подивись демо-відео роботи

застосунку.

https://user-images.githubusercontent.com/17479434/125040406-49a6f600-e0a0-11eb-975d-e7d8eaf2af6b.mp4

## Форма пошуку

Форма спочатку міститья в HTML документі. Користувач буде вводити рядок для

пошуку у текстове поле, а по сабміту форми необхідно виконувати HTTP-запит.

```html

  

  Search

```

## HTTP-запити

Для бекенду використовуй публічний API сервісу

[Pixabay](https://pixabay.com/api/docs/). Зареєструйся, отримай свій унікальний

ключ доступу і ознайомся з документацією.

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

- `key` - твій унікальний ключ доступу до API.

- `q` - термін для пошуку. Те, що буде вводити користувач.

- `image_type` - тип зображення. На потрібні тільки фотографії, тому постав

  значення `photo`.

- `orientation` - орієнтація фотографії. Постав значення `horizontal`.

- `safesearch` - фільтр за віком. Постав значення `true`.

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

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

властивості:

- `webformatURL` - посилання на маленьке зображення для списку карток.

- `largeImageURL` - посилання на велике зображення.

- `tags` - рядок з описом зображення. Підійде для атрибуту `alt`.

- `likes` - кількість лайків.

- `views` - кількість переглядів.

- `comments` - кількість коментарів.

- `downloads` - кількість завантажень.

Якщо бекенд повертає порожній масив, значить нічого підходящого не було

знайдено. У такому разі показуй повідомлення з текстом

`"Sorry, there are no images matching your search query. Please try again."`.

Для повідомлень використовуй бібліотеку

[notiflix](https://github.com/notiflix/Notiflix#readme).

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

Елемент `div.gallery` спочатку міститься в HTML документі, і в нього необхідно

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

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

```html



  



```


Шаблон розмітки картки одного зображення для галереї.

```html



  

  


    


      Likes

    

    


      Views

    

    


      Comments

    

    


      Downloads

    

  



```


## Пагінація

Pixabay API підтримує пагінацію і надає параметри `page` і `per_page`. Зроби

так, щоб в кожній відповіді приходило 40 об'єктів (за замовчуванням 20).

- Початкове значення параметра `page` повинно бути `1`.

- З кожним наступним запитом, його необхідно збільшити на `1`.

- У разі пошуку за новим ключовим словом, значення `page` потрібно повернути до

  початкового, оскільки буде пагінація по новій колекції зображень.

HTML документ вже містить розмітку кнопки, по кліку на яку, необхідно виконувати

запит за наступною групою зображень і додавати розмітку до вже існуючих

елементів галереї.

```html

Load more

```

- В початковому стані кнопка повинна бути прихована.

- Після першого запиту кнопка з'являється в інтерфейсі під галереєю.

- При повторному сабміті форми кнопка спочатку ховається, а після запиту знову

  відображається.

У відповіді бекенд повертає властивість `totalHits` - загальна кількість

зображень, які відповідають критерію пошуку (для безкоштовного акаунту). Якщо

користувач дійшов до кінця колекції, ховай кнопку і виводь повідомлення з

текстом `"We're sorry, but you've reached the end of search results."`.

## Додатково

> ⚠️ Наступний функціонал не обов'язковий для здавання завдання, але буде

> хорошою додатковою практикою.

### Повідомлення

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

буде написано, скільки всього знайшли зображень (властивість `totalHits`). Текст

повідомлення - `"Hooray! We found totalHits images."`

### Бібліотека `SimpleLightbox`

Додати відображення великої версії зображення з бібліотекою

[SimpleLightbox](https://simplelightbox.com/) для повноцінної галереї.

- У розмітці необхідно буде обгорнути кожну картку зображення у посилання, як

  зазначено в документації.

- Бібліотека містить матод `refresh()`, який обов'язково потрібно викликати

  щоразу після додавання нової групи карток зображень.

Для того щоб підключити CSS код бібліотеки в проект, необхідно додати ще один

імпорт, крім того, що описаний в документації.

```js

// Описаний в документації

import SimpleLightbox from 'simplelightbox';

// Додатковий імпорт стилів

import 'simplelightbox/dist/simple-lightbox.min.css';

```

### Прокручування сторінки

Зробити плавне прокручування сторінки після запиту і відтворення кожної

наступної групи зображень. Ось тобі код-підказка, але розберися у ньому

самостійно.

```js

const { height: cardHeight } = document

  .querySelector('.gallery')

  .firstElementChild.getBoundingClientRect();

window.scrollBy({

  top: cardHeight * 2,

  behavior: 'smooth',

});

```

### Нескінченний скрол

Замість кнопки «Load more», можна зробити нескінченне завантаження зображень під

час прокручування сторінки. Ми надаємо тобі повну свободу дій в реалізації,

можеш використовувати будь-які бібліотеки.