https://github.com/reddy-epk/react-gallery-app
A react app for changing images in a gallery style
https://github.com/reddy-epk/react-gallery-app
front-end-web-development gallery-images image-changer reactjs
Last synced: 8 months ago
JSON representation
A react app for changing images in a gallery style
- Host: GitHub
- URL: https://github.com/reddy-epk/react-gallery-app
- Owner: reddy-epk
- Created: 2024-03-21T11:34:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-21T12:53:51.000Z (over 1 year ago)
- Last Synced: 2025-01-07T17:42:25.663Z (9 months ago)
- Topics: front-end-web-development, gallery-images, image-changer, reactjs
- Language: JavaScript
- Homepage: https://epkgallery.ccbp.tech/
- Size: 190 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Building a React **Gallery App**
### Refer to the image below:
### Design Files
Click to view
- [Extra Small (Size < 576px) and Small (Size >= 576px)](https://assets.ccbp.in/frontend/content/react-js/gallery-sm-output-v2.png)
- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/gallery-lg-output.png)
### Set Up Instructions
Click to view
- Download dependencies by running `npm install`
- Start up the app using `npm start`
### Quick Tips
Click to view
- Use the CSS `opacity` property to set the degree to which content behind an element is hidden. It accepts a value in the range of 0.0 to 1.0 inclusive
```
opacity: 0.5;
```
### Important Note
Click to view
**The following instructions are required for the tests to pass**
- The selected image should have the alt as the value of the key `imageAltText` from each image details object provided
- The thumbnail images should have the alt as values of the key `thumbnailAltText` from each image details object provided
### Resources
Colors
Hex: #1e293b
Hex: #ffffff
Hex: #64748b
Font-families
- Roboto
> ### _Things to Keep in Mind_
> for individuals:
> - All components you implement should go in the `src/components` directory.
> - Don't change the component folder names as those are the files being imported into the tests.