https://github.com/reddy-epk/technology-cards
A react reusable code snippet for accessing list members
https://github.com/reddy-epk/technology-cards
react reusable-cards reusable-code reusable-component reusable-components
Last synced: 4 months ago
JSON representation
A react reusable code snippet for accessing list members
- Host: GitHub
- URL: https://github.com/reddy-epk/technology-cards
- Owner: reddy-epk
- Created: 2024-03-15T06:31:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T06:39:33.000Z (almost 2 years ago)
- Last Synced: 2025-07-01T14:11:27.649Z (6 months ago)
- Topics: react, reusable-cards, reusable-code, reusable-component, reusable-components
- Language: JavaScript
- Homepage: https://xtechs.ccbp.tech/
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
In this project, let's build **Technology Cards** by applying the concepts we have learned till now.
### Refer to the image below:
### Design Files
Click to view
- [Extra Small (Size < 576px), Small (Size >= 576px), and Medium (Size >= 768px)](https://assets.ccbp.in/frontend/content/react-js/technology-cards-sm-output.png)
- [Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/technology-cards-lg-output.png)
### Set Up Instructions
Click to view
- Download dependencies by running `npm install`
- Start up the app using `npm start`
### Completion Instructions
Functionality to be added
The app must have the following functionalities
- The App is provided with `cardsList`. It consists of a list of cardItem objects with the following properties in each cardItem object
| Key | Data Type |
| :---------: | :-------: |
| id | Number |
| title | String |
| description | String |
| imgUrl | String |
| className | String |
- The value of the key `id` should be used as a key to the `CardItem` component.
- The value of the key `className` should be used for the HTML list item in the `CardItem` component.
Implementation Files
Use these files to complete the implementation:
- `src/App.js`
- `src/App.css`
- `src/components/CardItem/index.js`
- `src/components/CardItem/index.css`
### Important Note
Click to view
**The following instructions are required for the tests to pass**
- Each `CardItem` should have an HTML image element with `alt` attribute value as the value of the key **title** in `cardsList`
### Resources
Colors
Hex: #f4faff
Hex: #64748b
Hex: #ffffff
Hex: #ff4f64
Hex: #00a8e7
Hex: #44c4a1
Hex: #fcc200
Hex: #171f46
Font-families
- Roboto