Skip to content

Commit e3b4a1d

Browse files
aerinpatelaerinpatel
committed
also added an new ui/ux
1 parent 55c6ded commit e3b4a1d

File tree

3 files changed

+162
-39
lines changed

3 files changed

+162
-39
lines changed

‎037-pokedex/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,40 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="style.css" />
77
<title>Pokedex</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
89
</head>
910
<body>
1011
<h1>Pokedex</h1>
12+
<div class="user-input">
13+
<div class="choose-type-of-pokemon">
14+
<label for="type-of-pokemon">Choose a type of pokemon:</label>
15+
<select name="type-of-pokemon" class="form-select" id="type-of-pokemon">
16+
<option value="all" disabled selected>type</option>
17+
<option value="fire">fire</option>
18+
<option value="grass">grass</option>
19+
<option value="electric">electric</option>
20+
<option value="water">water</option>
21+
<option value="ground">ground</option>
22+
<option value="rock">rock</option>
23+
<option value="fairy">fairy</option>
24+
<option value="poison">poison</option>
25+
<option value="bug">bug</option>
26+
<option value="dragon">dragon</option>
27+
<option value="psychic">psychic</option>
28+
<option value="flying">flying</option>
29+
<option value="fighting">fighting</option>
30+
<option value="normal">normal</option>
31+
32+
</select>
33+
</div>
34+
<div class="choose-number-of-pokemon">
35+
<label for="number-of-pokemon">Choose number of pokemon:</label>
36+
<input type="number" id="number-of-pokemon" min="1" max="300" />
37+
</div>
38+
<button onclick="fetchPokemons()">Catch it!!</button>
39+
</div>
1140
<div class="poke-container" id="poke-container"></div>
1241
<script src="script.js"></script>
42+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
1343
</body>
1444
</html>

‎037-pokedex/script.js

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const pokeContainer = document.getElementById("poke-container");
2-
const pokemonCount = 150;
2+
3+
// console.log(pokemonCount, pokemonType);
34
const colors = {
45
fire: "#FDDFDF",
56
grass: "#DEFDE0",
@@ -19,42 +20,61 @@ const colors = {
1920
const mainTypes = Object.keys(colors);
2021

2122
const createPokemonCard = (pokemon) => {
23+
const pokemonType = document.getElementById("type-of-pokemon").value || "all";
2224
const pokemonElement = document.createElement("div");
2325
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];
26+
// const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
27+
// const id = pokemon.id.toString().padStart(3, "0");
28+
// const pokeTypes = pokemon.types.map((type) => type.type.name);
29+
// const type = mainTypes.find((type) => pokeTypes.indexOf(type) > -1);
30+
const color = colors[pokemonType];
2931
pokemonElement.style.backgroundColor = color;
32+
3033
const pokemonInnerHTML = `
3134
<div class="img-container">
3235
<img
33-
src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png"
36+
src="${pokemon.image}"
37+
alt="${pokemon.name}"
3438
alt=""
3539
/>
3640
</div>
3741
<div class="info">
38-
<span class="number">#${id}</span>
39-
<h3 class="name">${name}</h3>
40-
<small class="type">Type: <span>${type}</span></small>
42+
<span class="number">#${pokemon.id}</span>
43+
<h3 class="name">${pokemon.name}</h3>
44+
<small class="type">Type: <span>${pokemonType}</span></small>
4145
</div>
4246
`;
4347
pokemonElement.innerHTML = pokemonInnerHTML;
4448
pokeContainer.appendChild(pokemonElement);
4549
};
4650

4751
const getPokemon = async (id) => {
48-
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
52+
//fetch data
53+
const pokemonType = document.getElementById("type-of-pokemon").value || "all";
54+
const url = `https://pokeapi.co/api/v2/type/${pokemonType}`;
4955
const res = await fetch(url);
5056
const data = await res.json();
51-
createPokemonCard(data);
57+
console.log(data);
58+
// send data to createPokemonCard
59+
const pokemonName = data.pokemon[id].pokemon.name;
60+
const pokemonId = data.pokemon[id].pokemon.url.split("/")[6];
61+
// const pokemonTypes = data.pokemon.pokemon.types.map((type) => type.type.name);
62+
const image = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonId}.png`;
63+
const next = {
64+
id: id,
65+
name: pokemonName,
66+
// types: pokemonTypes,
67+
image: image,
68+
};
69+
createPokemonCard(next);
5270
};
5371

5472
const fetchPokemons = async () => {
55-
for (let i = 1; i < pokemonCount; i++) {
73+
const pokemonCount = document.getElementById("number-of-pokemon").value || 20;
74+
75+
for (let i = 1; i <= pokemonCount; i++) {
5676
await getPokemon(i);
5777
}
5878
};
5979

60-
fetchPokemons();
80+
// fetchPokemons();

‎037-pokedex/style.css

Lines changed: 98 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,140 @@
1-
@import url("https://fonts.googleapis.com/css?family=Lato:wght@300;400&display=swap");
1+
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
22

33
* {
44
box-sizing: border-box;
55
}
66

77
body {
8-
background: #efefbb;
9-
background: linear-gradient(to right, #d4d3dd, #efefbb);
10-
font-family: "Lato", sans-serif;
8+
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
9+
font-family: "Roboto", sans-serif;
1110
display: flex;
1211
flex-direction: column;
1312
align-items: center;
14-
justify-content: center;
1513
margin: 0;
14+
padding: 20px;
1615
}
1716

1817
h1 {
19-
letter-spacing: 3px;
18+
margin: 20px 0;
19+
font-size: 3rem;
20+
color: #374785;
21+
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
2022
}
2123

22-
.poke-container {
24+
.user-input {
2325
display: flex;
2426
flex-wrap: wrap;
25-
align-items: space-between;
2627
justify-content: center;
27-
margin: 0 auto;
28+
align-items: center;
29+
margin-bottom: 30px;
30+
background-color: rgba(255, 255, 255, 0.8);
31+
padding: 20px 30px;
32+
border-radius: 10px;
33+
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
34+
}
35+
36+
.user-input > div {
37+
margin: 10px 20px;
38+
}
39+
40+
.choose-number-of-pokemon label {
41+
font-size: 1.2rem;
42+
margin-right: 10px;
43+
color: #374785;
44+
}
45+
46+
select, input {
47+
font-size: 1rem;
48+
padding: 0.5rem 1rem;
49+
border: 1px solid #ccc;
50+
border-radius: 5px;
51+
outline: none;
52+
transition: border-color 0.3s ease;
53+
}
54+
55+
select:focus, input:focus {
56+
border-color: #374785;
57+
}
58+
59+
.user-input button {
60+
font-size: 1.1rem;
61+
padding: 0.6rem 1.2rem;
62+
border: none;
63+
background-color: #374785;
64+
color: #fff;
65+
border-radius: 5px;
66+
cursor: pointer;
67+
transition: background-color 0.3s ease;
68+
margin-top: 10px;
69+
}
70+
71+
.user-input button:hover {
72+
background-color: #2c3e50;
73+
}
74+
75+
.poke-container {
76+
display: grid;
77+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
78+
gap: 20px;
79+
width: 100%;
2880
max-width: 1200px;
2981
}
3082

3183
.pokemon {
32-
background-color: #eee;
84+
background-color: #fff;
3385
border-radius: 10px;
34-
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
35-
margin: 10px;
36-
padding: 20px;
86+
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
87+
padding: 15px;
3788
text-align: center;
89+
transition: transform 0.2s ease;
90+
}
91+
92+
.pokemon:hover {
93+
transform: scale(1.05);
3894
}
3995

4096
.pokemon .img-container {
41-
background-color: rgba(255, 255, 255, 0.6);
97+
background-color: #f7f7f7;
4298
border-radius: 50%;
43-
height: 120px;
44-
width: 120px;
45-
text-align: center;
99+
height: 130px;
100+
width: 130px;
101+
margin: 0 auto;
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
overflow: hidden;
46106
}
47107

48108
.pokemon .img-container img {
49-
max-width: 90%;
50-
margin-top: 20px;
109+
width: 100%;
110+
height: auto;
51111
}
52112

53113
.pokemon .info {
54-
margin-top: 20px;
114+
margin-top: 15px;
55115
}
56116

57117
.pokemon .info .number {
58-
background-color: rgba(0, 0, 0, 0.1);
118+
background-color: #f1f1f1;
59119
padding: 5px 10px;
60-
border-radius: 10px;
61-
font-size: 0.8em;
120+
border-radius: 20px;
121+
font-size: 0.9em;
122+
display: inline-block;
123+
margin-bottom: 10px;
62124
}
63125

64126
.pokemon .info .name {
65-
margin: 15px 0 7px;
66-
letter-spacing: 1px;
127+
font-size: 1.3rem;
128+
color: #333;
129+
margin-bottom: 8px;
67130
}
131+
132+
.pokemon .info .type {
133+
font-size: 1rem;
134+
margin: 0;
135+
}
136+
137+
.pokemon .info .type span {
138+
font-weight: bold;
139+
color: #374785;
140+
}

0 commit comments

Comments
 (0)