-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
35 lines (34 loc) · 1.13 KB
/
main.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
const poke_container=document.getElementById('poke_container');
const pokemons_number=150;
//fetch the initial 150 pokemons
const fetchPokemons = async ()=>{
for(let i=1;i<=pokemons_number;i++){
await getPokemon(i);
}
}
//make the pokemon api request
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);
}
const createPokemonCard=(pokemon)=>{
const pokemonEl=document.createElement('div');//create a new div in the html document
pokemonEl.classList.add('pokemon');
const{id,name,sprites,types}=pokemon;
const type=types[0].type.name;
const pokeInnerHTML=`
<div class="img-container">
<img src="${sprites.front_default}" alt="${name}"/>
</div>
<div class="info">
<span class="number">${id}</span>
<h3 class="name">${name}</h3>
<small class="type">Type:<span>${type}</span></small>
</div>
`;
pokemonEl.innerHTML=pokeInnerHTML;
poke_container.appendChild(pokemonEl);
}
fetchPokemons();