-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.js
72 lines (62 loc) · 1.88 KB
/
code.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const poke_container = document.getElementById('poke_container');
const pokemons_number = 200;
const colors = {
fire: '#FDDFDF',
grass: '#DEFDE0',
electric: '#FCF7DE',
water: '#DEF3FD',
ground: '#f4e7da',
rock: '#d5d5d4',
fairy: '#fceaff',
poison: '#98d7a5',
bug: '#f8d5a3',
dragon: '#97b3e6',
psychic: '#eaeda1',
flying: '#F5F5F5',
fighting: '#E6E0D4',
normal: '#F5F5F5'
};
const main_types = Object.keys(colors);
const fetchPokemons = async () => {
for (let i = 1; i <= pokemons_number; i++) {
await getPokemon(i);
}
};
const getPokemon = async id => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const res = await fetch(url);
const pokemon = await res.json();
createPokemonCard(pokemon);
};
function createPokemonCard(pokemon) {
const pokemonEl = document.createElement('div');
pokemonEl.classList.add('pokemon');
const poke_types = pokemon.types.map(type => type.type.name);
const type = main_types.find(type => poke_types.indexOf(type) > -1);
const weight = pokemon.weight;
const color = colors[type];
pokemonEl.style.backgroundColor = color;
const pokeInnerHTML = `
<div class="img-container">
<img src="https://pokeres.bastionbot.org/images/pokemon/${
pokemon.id
}.png" alt="${name}" />
</div>
<div class="info">
<span class="number">#${pokemon.id
.toString()
.padStart(3, '0')}</span>
<h3 class="name">${capitalizeFirstLetter(pokemon.name)}</h3>
<div class="specs">
<p class="type">Type: <span>${capitalizeFirstLetter(type)}</span></p>
<p class="type">Weight: <span>${weight} Kg</span></p>
</div>
</div>
`;
pokemonEl.innerHTML = pokeInnerHTML;
poke_container.appendChild(pokemonEl);
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
fetchPokemons();