In this project, let's build Technology Cards by applying the concepts we have learned till now.
Click to view
Click to view
- Download dependencies by running
npm install
- Start up the app using
npm start
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 objectKey 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 theCardItem
component. -
The value of the key
className
should be used for the HTML list item in theCardItem
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
Click to view
The following instructions are required for the tests to pass
- Each
CardItem
should have an HTML image element withalt
attribute value as the value of the key title incardsList
Colors
Font-families
- Roboto
- 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.
- Do not remove the pre-filled code
- Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.