Skip to content

Commit ac4ab99

Browse files
abhishektyagi2912abhishektyagi2912
authored
Add files via upload
1 parent 894c066 commit ac4ab99

File tree

21 files changed

+36979
-0
lines changed

21 files changed

+36979
-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/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;

‎Fetch API using react app/src/MyComponents/Navigation/Navbar.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.navbar{
8+
display: flex;
9+
justify-content: space-around;
10+
align-items: center;
11+
height: 75px;
12+
background: black;
13+
color: white;
14+
}
15+
16+
.logo{
17+
font-size: 30px;
18+
color: rgb(247, 241, 241);
19+
}
20+
21+
.nav-links{
22+
display: flex;
23+
justify-content: flex-end;
24+
list-style: none;
25+
width: 75%;
26+
27+
}
28+
29+
.mobile-menu-icon{
30+
display: none;
31+
}
32+
33+
@media screen and (max-width: 700px) {
34+
.logo{
35+
display: flex;
36+
position: absolute;
37+
top: 15px;
38+
left: 35px;
39+
}
40+
}

0 commit comments

Comments
 (0)