Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleksandr-romashko/goit-react-hw-03-image-finder
Homework for React HTTP requests.
https://github.com/oleksandr-romashko/goit-react-hw-03-image-finder
axios http module-scss pixabay-api react
Last synced: about 1 month ago
JSON representation
Homework for React HTTP requests.
- Host: GitHub
- URL: https://github.com/oleksandr-romashko/goit-react-hw-03-image-finder
- Owner: oleksandr-romashko
- Created: 2024-05-06T01:43:46.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-15T18:29:42.000Z (7 months ago)
- Last Synced: 2024-05-16T21:09:50.419Z (7 months ago)
- Topics: axios, http, module-scss, pixabay-api, react
- Language: JavaScript
- Homepage: https://oleksandr-romashko.github.io/goit-react-hw-03-image-finder/
- Size: 17.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# goit-react-hw-03-image-finder
This is homework for the React HTTP requests.
## Live page
The live page for this repository can be viewed at [GitHub Pages](https://oleksandr-romashko.github.io/goit-react-hw-03-image-finder/).
## Local build and run
1. Make sure you have an LTS version of Node.js installed on your computer. [Download and install](https://nodejs.org/en/) if needed.
1. Install the project's base dependencies with the `npm install` command.
1. Start development mode by running the `npm start` command.
2. Go to [localhost:3000](http://localhost:3000/) (may vary) in your browser. This page will automatically reload after saving changes to the project files.
## Task Acceptance Criteria
[React project template](https://github.com/goitacademy/react-homework-template/blob/main/README.en.md) is used as a starting point for the application (more information about how to start-up with such a project may be found at the template repo description or [here in a Readme file](./assets/README.project-template.en.md)).
* The `goit-react-hw-03-image-finder` repository is created.
* When submitting homework, there are two links: to the source files and the live pages of each assignment on `GitHub Pages'.
* The component state stores the minimum required set of data, the rest is calculated.
* There are no errors or warnings in the console when running application code.
* Each component has a separate folder with the React-component file and styles file.
* The `propTypes` are described for all components.
* Everything that a component expects in the form of props is passed to it when it is called.
* Component names are clear and descriptive.
* The JS code is clean and clear, `Prettier` is used.
* Styling is done by `CSS modules` or `Styled Components`.
## Task - Image Search
Write a keyword image search application. Preview of a working application see [link](./assets/task/image-finder-example.mp4) or [link](https://drive.google.com/file/d/1oXCGyiq4uKwW0zzraZLKk4lh3voBlBzZ/view?usp=sharing).
Create components ``, ``, ``, ``, `` и ``. Ready styles of components can be taken in file [styles.css](./assets/task/styles.css) and tweak them if needed.
### Pixabay API instructions
For HTTP requests, use a public image search service [Pixabay](https://pixabay.com/api/docs/). Register and get a private access key.
The URL string of the HTTP request.
```
https://pixabay.com/api/?q=cat&page=1&key=your_key&image_type=photo&orientation=horizontal&per_page=12
```
Pixabay API supports pagination, by default the `page` parameter is set to `1`. Let the response comes with 12 objects each, set to `per_page`. Don't Remember that when you search for a new keyword, you have to reset the value of page to `1`.
The response from the api comes an array of objects in which you are only interested in the following properties:
* `id` - a unique identifier
* `webformatURL` - link to the small image for the list of cards
* `largeImageURL` - link to the large image for the modal window
### Description of the component ``
The component takes one prop `onSubmit` - a function to pass the value of the input when the form is submitted. Creates a DOM element of the following structure:
```html
```
### Description of the `` component
A list of image cards. Creates a DOM element of the following structure:
```html
with images -->
```
### Description of the component ``
A list item component with an image. Creates a DOM element of the following structure:
```html
```
### Description of the `` component
Pressing the `Load more` button should load the next batch of Images and rendered with the previous ones. The button should be rendered only when there are some loaded images. If the image array is empty, the button is not rendered.
### Description of the `` component
Spinner component, displays while images are being loaded. Use any ready made component, e.g. [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner).
### Description of the component ``
When you click on a gallery item a modal window with a dark overlay and display a larger version of the image. The modal window should be closed.
The appearance is similar to the functionality of this [VanillaJS-plugin](https://basiclightbox.electerious.com/), only instead of white modal window the image is rendered (in the example press `Run`). Animation is not required.
```html
```