Skip to content

Commit 016fcea

Browse files
solygambassolygambas
committed
add pokedex
1 parent 62108d4 commit 016fcea

File tree

5 files changed

+142
-3
lines changed

5 files changed

+142
-3
lines changed

‎37-pokedex/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Pokedex</title>
8+
</head>
9+
<body>
10+
<h1>Pokedex</h1>
11+
<div class="poke-container" id="poke-container"></div>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎37-pokedex/script.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const pokeContainer = document.getElementById("poke-container");
2+
const pokemonCount = 150;
3+
const colors = {
4+
fire: "#FDDFDF",
5+
grass: "#DEFDE0",
6+
electric: "#FCF7DE",
7+
water: "#DEF3FD",
8+
ground: "#f4e7da",
9+
rock: "#d5d5d4",
10+
fairy: "#fceaff",
11+
poison: "#98d7a5",
12+
bug: "#f8d5a3",
13+
dragon: "#97b3e6",
14+
psychic: "#eaeda1",
15+
flying: "#F5F5F5",
16+
fighting: "#E6E0D4",
17+
normal: "#F5F5F5",
18+
};
19+
const mainTypes = Object.keys(colors);
20+
21+
const createPokemonCard = (pokemon) => {
22+
const pokemonElement = document.createElement("div");
23+
pokemonElement.classList.add("pokemon");
24+
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
25+
const id = pokemon.id.toString().padStart(3, "0");
26+
const pokeTypes = pokemon.types.map((type) => type.type.name);
27+
const type = mainTypes.find((type) => pokeTypes.indexOf(type) > -1);
28+
const color = colors[type];
29+
pokemonElement.style.backgroundColor = color;
30+
const pokemonInnerHTML = `
31+
<div class="img-container">
32+
<img
33+
src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png"
34+
alt=""
35+
/>
36+
</div>
37+
<div class="info">
38+
<span class="number">#${id}</span>
39+
<h3 class="name">${name}</h3>
40+
<small class="type">Type: <span>${type}</span></small>
41+
</div>
42+
`;
43+
pokemonElement.innerHTML = pokemonInnerHTML;
44+
pokeContainer.appendChild(pokemonElement);
45+
};
46+
47+
const getPokemon = async (id) => {
48+
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
49+
const res = await fetch(url);
50+
const data = await res.json();
51+
createPokemonCard(data);
52+
};
53+
54+
const fetchPokemons = async () => {
55+
for (let i = 1; i < pokemonCount; i++) {
56+
await getPokemon(i);
57+
}
58+
};
59+
60+
fetchPokemons();

‎37-pokedex/style.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import url("https://fonts.googleapis.com/css?family=Lato:wght@300;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: #efefbb;
9+
background: linear-gradient(to right, #d4d3dd, #efefbb);
10+
font-family: "Lato", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
margin: 0;
16+
}
17+
18+
h1 {
19+
letter-spacing: 3px;
20+
}
21+
22+
.poke-container {
23+
display: flex;
24+
flex-wrap: wrap;
25+
align-items: space-between;
26+
justify-content: center;
27+
margin: 0 auto;
28+
max-width: 1200px;
29+
}
30+
31+
.pokemon {
32+
background-color: #eee;
33+
border-radius: 10px;
34+
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
35+
margin: 10px;
36+
padding: 20px;
37+
text-align: center;
38+
}
39+
40+
.pokemon .img-container {
41+
background-color: rgba(255, 255, 255, 0.6);
42+
border-radius: 50%;
43+
height: 120px;
44+
width: 120px;
45+
text-align: center;
46+
}
47+
48+
.pokemon .img-container img {
49+
max-width: 90%;
50+
margin-top: 20px;
51+
}
52+
53+
.pokemon .info {
54+
margin-top: 20px;
55+
}
56+
57+
.pokemon .info .number {
58+
background-color: rgba(0, 0, 0, 0.1);
59+
padding: 5px 10px;
60+
border-radius: 10px;
61+
font-size: 0.8em;
62+
}
63+
64+
.pokemon .info .name {
65+
margin: 15px 0 7px;
66+
letter-spacing: 1px;
67+
}

‎40-3d boxes background/style.css

-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
21
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
32

43
* {
@@ -7,7 +6,6 @@
76

87
body {
98
background-color: #fafafa;
10-
font-family: "Roboto", sans-serif;
119
display: flex;
1210
flex-direction: column;
1311
align-items: center;

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/34-animated%20countdown) | [Live Demo](https://codepen.io/solygambas/full/vYXPbYW) |
4343
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/35-image%20carousel) | [Live Demo](https://codepen.io/solygambas/full/zYKbQZK) |
4444
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/36-hoverboard) | [Live Demo](https://codepen.io/solygambas/full/OJRqYKK) |
45-
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/pokedex) | [Live Demo](/pokedex/) |
45+
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/37-pokedex) | [Live Demo](/pokedex/) |
4646
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
4747
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
4848
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3d%20boxes%20background) | [Live Demo](/3d-background-boxes/) |

0 commit comments

Comments
 (0)