Skip to content

Commit bfed388

Browse files
harshita2216harshita2216
authored
Merge pull request #327 from abhishektyagi2912/main
Add files via upload
2 parents 894c066 + dbb33f5 commit bfed388

File tree

21 files changed

+36977
-0
lines changed

21 files changed

+36977
-0
lines changed

‎Fetch API using react app/package-lock.json

Lines changed: 36528 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Fetch API using react app/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "task-2",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@material-ui/core": "^4.12.1",
7+
"@material-ui/icons": "^4.11.2",
8+
"@testing-library/jest-dom": "^5.14.1",
9+
"@testing-library/react": "^11.2.7",
10+
"@testing-library/user-event": "^12.8.3",
11+
"react": "^17.0.2",
12+
"react-dom": "^17.0.2",
13+
"react-loader-spinner": "^4.0.0",
14+
"react-scripts": "4.0.3",
15+
"tachyons": "^4.12.0",
16+
"web-vitals": "^1.1.2"
17+
},
18+
"scripts": {
19+
"start": "react-scripts start",
20+
"build": "react-scripts build",
21+
"test": "react-scripts test",
22+
"eject": "react-scripts eject"
23+
},
24+
"eslintConfig": {
25+
"extends": [
26+
"react-app",
27+
"react-app/jest"
28+
]
29+
},
30+
"browserslist": {
31+
"production": [
32+
">0.2%",
33+
"not dead",
34+
"not op_mini all"
35+
],
36+
"development": [
37+
"last 1 chrome version",
38+
"last 1 firefox version",
39+
"last 1 safari version"
40+
]
41+
}
42+
}

‎Fetch API using react app/public/bg.jpg

336 KB
Loading

‎Fetch API using react app/public/favicon.ico

3.78 KB
Binary file not shown.

‎Fetch API using react app/public/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
15+
<title>Zippy</title>
16+
</head>
17+
<body>
18+
<noscript>You need to enable JavaScript to run this app.</noscript>
19+
<div id="root"></div>
20+
21+
</body>
22+
</html>

‎Fetch API using react app/public/logo192.png

5.22 KB
Loading

‎Fetch API using react app/public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎Fetch API using react app/readme.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
## Project Description
2+
That we add get user button to API calls to get user data and have a loader while API fetch the data .
3+
4+
Stack:
5+
[x] html
6+
[x] CSS
7+
[x] JavaScript
8+
[x] react
9+
10+
11+
12+
13+
14+
## Prerequisites
15+
16+
### Install Node JS
17+
Refer to https://nodejs.org/en/ to install nodejs
18+
19+
### Install create-react-app
20+
Install create-react-app npm package globally. This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app
21+
22+
```bash
23+
npm install -g create-react-app
24+
```
25+
26+
## Cloning and Running the Application in local
27+
28+
Clone the project into local
29+
30+
Install all the npm packages. Go into the project folder and type the following command to install all npm packages
31+
32+
```bash
33+
npm install
34+
```
35+
36+
In order to run the application Type the following command
37+
38+
```bash
39+
npm start
40+
```
41+
42+
The Application Runs on **localhost:3000**
43+
44+
## Screenshot
45+
46+
![Screenshot (194)](https://user-images.githubusercontent.com/81071871/127682487-0fe5c6c4-dbea-46d9-b4cc-d05cf2dfcc8d.png)
47+
48+
![Screenshot (195)](https://user-images.githubusercontent.com/81071871/127682536-3775484a-e20e-41f0-978d-dd0ff130f933.png)

‎Fetch API using react app/src/MyComponents/Card.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
const Card = ({ name, email, id, lname}) => {
4+
5+
return (
6+
<div className='tc grow bg-light-green br3 pa4 ma4 dib bw3 shadow-10'>
7+
<img alt='robots' src={`https://reqres.in/img/faces/${id}-image.jpg`} />
8+
<div>
9+
<br />
10+
<h2>{name} {lname}</h2>
11+
<br />
12+
<h3>{email}</h3>
13+
</div>
14+
</div>
15+
);
16+
}
17+
18+
export default Card;

‎Fetch API using react app/src/MyComponents/CardList.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import Card from './Card';
3+
import '../container/styles.css';
4+
5+
6+
const CardList = ({robots})=>{
7+
return(
8+
<div>
9+
{
10+
robots.map((user, i) => {
11+
return(
12+
<Card
13+
key={i}
14+
id={robots[i].id}
15+
name={robots[i].first_name}
16+
lname={robots[i].last_name}
17+
email={robots[i].email}
18+
/>
19+
);
20+
})
21+
}
22+
</div>
23+
);
24+
}
25+
26+
export default CardList;

0 commit comments

Comments
 (0)