https://github.com/annatsepilova/goit-react-woolf-hw-03-image-finder

https://github.com/annatsepilova/goit-react-woolf-hw-03-image-finder

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/annatsepilova/goit-react-woolf-hw-03-image-finder
• Owner: AnnaTsepilova
• Created: 2024-02-17T11:57:56.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-05T20:09:29.000Z (8 months ago)
• Last Synced: 2024-03-05T21:25:29.894Z (8 months ago)
• Language: JavaScript
• Homepage: https://annatsepilova.github.io/goit-react-woolf-hw-03-image-finder/
• Size: 8.46 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Пошук зображень

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

застосунку

[дивись за посиланням](https://drive.google.com/file/d/1oXCGyiq4uKwW0zzraZLKk4lh3voBlBzZ/view?usp=sharing).

Створи компоненти ``, ``, ``,

``, `` і ``.

### Інструкція Pixabay API

Для HTTP-запитів використовуй публічний сервіс пошуку зображень

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

доступу.

URL-рядок HTTP-запиту.

```bash

https://pixabay.com/api/?q=cat&page=1&key=your_key&image_type=photo&orientation=horizontal&per_page=12

```

Pixabay API підтримує пагінацію, за замовчуванням параметр `page` дорівнює `1`.

Нехай у відповіді надходить по 12 об'єктів, встановлено в параметрі `per_page`.

Не забудь, що під час пошуку за новим ключовим словом, необхідно скидати

значення `page` до `1`.

У відповіді від апі приходить масив об'єктів, в яких тобі цікаві лише наступні

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

- `id` – унікальний ідентифікатор

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

- `largeImageURL` – посилання на велике зображення для модального вікна

### Опис компонента ``

Компонент приймає один проп `onSubmit` – функцію для передачі значення інпута

під час сабміту форми. Створює DOM-елемент наступної структури.

```html

  

    

      Search

    

    

  

```

### Опис компонента ``

Список карток зображень. Створює DOM-елемент наступної структури.

```html



  



```


### Опис компонента ``

Компонент елемента списку із зображенням. Створює DOM-елемент наступної

структури.

```html



  



```


### Опис компонента ``

При натисканні на кнопку `Load more` повинна довантажуватись наступна порція

зображень і рендеритися разом із попередніми. Кнопка повинна рендеритися лише

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

не рендериться.

### Опис компонента ``

Компонент спінера відображається, доки відбувається завантаження зображень.

Використовуйте будь-який готовий компонент, наприклад

[react-loader-spinner](https://github.com/mhnpd/react-loader-spinner) або

будь-який інший.

### Опис компонента ``

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

оверлеєм і відображатися велика версія зображення. Модальне вікно повинно

закриватися по натисканню клавіші `ESC` або по кліку на оверлеї.

Зовнішній вигляд схожий на функціонал цього

[VanillaJS-плагіна](https://basiclightbox.electerious.com/), тільки замість

білого модального вікна рендериться зображення (у прикладі натисніть `Run`).

Анімацію робити не потрібно!

```html



  


    

  



```


### Фінальний результат

![screencapture](./assets/screencapture_1.png)