Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lesiaukr/goit-react-woolf-hw-03-image-finder
Master's Degree React Course. HTTP requests
https://github.com/lesiaukr/goit-react-woolf-hw-03-image-finder
api axios goit-react-woolf-hw-03-image-finder http-requests react react-createportal react-icons toastify
Last synced: 30 days ago
JSON representation
Master's Degree React Course. HTTP requests
- Host: GitHub
- URL: https://github.com/lesiaukr/goit-react-woolf-hw-03-image-finder
- Owner: LesiaUKR
- Created: 2024-02-18T18:02:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-25T17:50:17.000Z (10 months ago)
- Last Synced: 2024-02-25T18:49:34.483Z (10 months ago)
- Topics: api, axios, goit-react-woolf-hw-03-image-finder, http-requests, react, react-createportal, react-icons, toastify
- Language: JavaScript
- Homepage: https://lesiaukr.github.io/goit-react-woolf-hw-03-image-finder/
- Size: 4.52 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Критерії приймання
- Створений репозиторій `goit-react-woolf-hw-03-image-finder`
- При здачі домашньої роботи є посилання: на вихідні файли та робочу сторінку
проектів на `GitHub Pages`.
- У стані компонентів зберігається мінімально необхідний набір даних, решта
обчислюється
- Під час запуску коду завдання в консолі відсутні помилки та попередження.
- Для кожного компонента є окрема папка з файлом React-компонента та файлом
стилів
- Все, що компонент очікує у вигляді пропсів, передається йому під час виклику.
- Імена компонентів зрозумілі та описові
- JS-код чистий і зрозумілий, використовується `Prettier`.
- Стилізація виконана `CSS-модулями` або `Styled Components`.
## Пошук зображень
Напиши застосунок пошуку зображень за ключовим словом. Прев'ю робочого
застосунку
[дивись за посиланням](https://drive.google.com/file/d/1oXCGyiq4uKwW0zzraZLKk4lh3voBlBzZ/view?usp=sharing).
Створи компоненти ``, ``, ``,
``, `` і ``. Готові стилі компонентів можна взяти у файлі
[styles.css](./assets/styles.css) і підправити під себе, якщо потрібно.
### Інструкція 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
```
### Опис компонента ``
Список карток зображень. Створює DOM-елемент наступної структури.
```html
```
### Опис компонента ``
Компонент елемента списку із зображенням. Створює DOM-елемент наступної
структури.
```html
```
### Опис компонента ``
При натисканні на кнопку `Load more` повинна довантажуватись наступна порція
зображень і рендеритися разом із попередніми. Кнопка повинна рендеритися лише
тоді, коли є якісь завантажені зображення. Якщо масив зображень порожній, кнопка
не рендериться.
### Опис компонента ``
Компонент спінера відображається, доки відбувається завантаження зображень.
Використовуйте будь-який готовий компонент, наприклад
[react-loader-spinner](https://github.com/mhnpd/react-loader-spinner) або
будь-який інший.
### Опис компонента ``
Під час кліку на елемент галереї повинно відкриватися модальне вікно з темним
оверлеєм і відображатися велика версія зображення. Модальне вікно повинно
закриватися по натисканню клавіші `ESC` або по кліку на оверлеї.
Зовнішній вигляд схожий на функціонал цього
[VanillaJS-плагіна](https://basiclightbox.electerious.com/), тільки замість
білого модального вікна рендериться зображення (у прикладі натисніть `Run`).
Анімацію робити не потрібно!
```html
```
#### Фінальний результат
