Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a56f338

Browse files
pramit-maratthapramit-marattha
authored
pokemon-info-app #21 
1 parent 5e09d3b commit a56f338

File tree

17 files changed

+11248
-1
lines changed

17 files changed

+11248
-1
lines changed

‎pokemon-react-web-app-project/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![pokemon_info](https://user-images.githubusercontent.com/37651620/95025734-aefe2e80-06ab-11eb-9915-ffad4e7014ed.png)
2+
3+
## It's Live 🎉 Visit here ==> https://pokemon-info-app.netlify.app/
4+
5+
---
26

37
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
48

‎pokemon-react-web-app-project/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "pokemon-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"react": "^16.13.1",
10+
"react-dom": "^16.13.1",
11+
"react-scripts": "3.4.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎pokemon-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎pokemon-react-web-app-project/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+
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>Pokedex</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
</body>
22+
</html>

‎pokemon-react-web-app-project/public/logo192.png

5.22 KB
Loading

‎pokemon-react-web-app-project/public/logo512.png

9.44 KB
Loading

‎pokemon-react-web-app-project/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+
}

‎pokemon-react-web-app-project/public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎pokemon-react-web-app-project/src/App.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useState, useEffect } from "react";
2+
import "./styles/App.css";
3+
import { fetchAllpokemon, getPokemon } from "./services/pokemon";
4+
import Tilecard from "./components/Tilecard";
5+
6+
function App() {
7+
const [pokedata, setPokedata] = useState([]);
8+
const [nextpagination, setNextpagination] = useState("");
9+
const [prevpagination, setPrevpagination] = useState("");
10+
const [loading, setLoading] = useState(true);
11+
const API_END_POINT_URL = "https://pokeapi.co/api/v2/pokemon";
12+
13+
useEffect(() => {
14+
async function fetchData() {
15+
let response = await fetchAllpokemon(API_END_POINT_URL);
16+
console.log(response);
17+
setNextpagination(response.next);
18+
setPrevpagination(response.previous);
19+
await loadingPokemon(response.results);
20+
setLoading(false);
21+
}
22+
fetchData();
23+
}, []);
24+
25+
const nextPage = async () => {
26+
setLoading(true);
27+
let data = await fetchAllpokemon(nextpagination);
28+
await loadingPokemon(data.results);
29+
setNextpagination(data.next);
30+
setPrevpagination(data.previous);
31+
setLoading(false);
32+
};
33+
const prevPage = async () => {
34+
if (!prevpagination) return;
35+
setLoading(true);
36+
let data = await fetchAllpokemon(prevpagination);
37+
await loadingPokemon(data.results);
38+
setNextpagination(data.next);
39+
setPrevpagination(data.previous);
40+
setLoading(false);
41+
};
42+
43+
const loadingPokemon = async (data) => {
44+
let _pokedex = await Promise.all(
45+
data.map(async (pokemon) => {
46+
let pokemonRecord = await getPokemon(pokemon.url);
47+
return pokemonRecord;
48+
})
49+
);
50+
setPokedata(_pokedex);
51+
};
52+
return (
53+
<>
54+
{loading ? (
55+
<div className="loader"></div>
56+
) : (
57+
<>
58+
<div className="grid-container">
59+
{pokedata.map((pokemon, i) => {
60+
return <Tilecard key={i} pokemon={pokemon} />;
61+
})}
62+
</div>
63+
<div className="btn">
64+
<button onClick={prevPage}> Previous page</button>
65+
<button onClick={nextPage}>Next Page</button>
66+
</div>
67+
</>
68+
)}
69+
</>
70+
);
71+
}
72+
73+
export default App;

‎pokemon-react-web-app-project/src/components/Tilecard/Tilecard.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import "./style.css";
3+
4+
export default function Tilecard({ pokemon }) {
5+
return (
6+
<div className="card">
7+
<div className="card-name">{pokemon.name}</div>
8+
9+
<div className="card-info">
10+
<div className="card-data card-data-weight">
11+
<p className="title">Weight of the {pokemon.name}</p>
12+
<p>{pokemon.weight}</p>
13+
</div>
14+
<div className="card-data card-data-height">
15+
<p className="title">Height of the {pokemon.name}</p>
16+
<p>{pokemon.height}</p>
17+
</div>
18+
<div className="card-data card-data-abilities">
19+
<p className="title">Abilities of the {pokemon.name}</p>
20+
<p>{pokemon.abilities[0].ability.name}</p>
21+
</div>
22+
</div>
23+
<div className="card-types">
24+
{pokemon.types.map((type) => {
25+
return <div className="card-type-name">{type.type.name}</div>;
26+
})}
27+
</div>
28+
<div className="card-image">
29+
<img src={pokemon.sprites.front_default} alt={pokemon.name} />
30+
</div>
31+
</div>
32+
);
33+
}

0 commit comments

Comments
 (0)