-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
78 lines (68 loc) · 3.04 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
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
73
74
75
76
77
78
import { showList, showDetail } from './navigation.js';
import { listItemTemplate, typeTemplate } from './templates.js';
import { capitalize } from './capitalize.js';
import { friendlyFetch } from './data.js';
// endereço da API: usado para fazer as requisições
const api = 'https://pokeapi.co/api/v2/';
// pega todos os elementos HTML que serão necessários
const listEl = document.querySelector('#list');
const detailEl = document.querySelector('#detail-section');
const backEl = document.querySelector('.back-to-list');
const avatarImgEl = document.querySelector('#avatar-img');
const detailAvatarImgEl = detailEl.querySelector('.item-avatar-img');
const detailNumberEl = detailEl.querySelector('.number');
const detailNameEl = detailEl.querySelector('.name');
const detailTitleEl = detailEl.querySelector('#detail-title');
const detailWeightEl = detailEl.querySelector('#detail-weight');
const detailHeightEl = detailEl.querySelector('#detail-height');
const detailTypesEl = detailEl.querySelector('#detail-types');
// lista com todos os pokemons
let pokemons = [];
//Ex01
friendlyFetch(`${api}pokemon/?limit=151`).then(resposta => {
pokemons = resposta.results;
listEl.innerHTML = '';
for(let i=0; i<pokemons.length;i++){
const id = i+1;
const dadosPokemon = {
number : id,
imageUrl : 'imgs/placeholder.png',
name: capitalize(pokemons[i].name)
}
listEl.innerHTML += listItemTemplate(dadosPokemon);
friendlyFetch(`${api}pokemon/${id}`)
.then(resposta => {
const imgPokemon = document.querySelector(`li[data-id="${id}"] img.item-avatar-img`);
imgPokemon.src = resposta.sprites.front_default;
});
}
//Ex02
const pokemonsLista = document.querySelectorAll('li.list-item');
pokemonsLista.forEach(pokemonEl => {
pokemonEl.addEventListener('click', (e) => {
const clicadoEl = e.target.offsetParent;
const idPokemon = clicadoEl.dataset.id;
const selecionado = document.querySelector('li.list-item.selected');
if(selecionado){
selecionado.classList.remove("selected");
}
clicadoEl.classList.add('selected');
showDetail();
fetch(`${api}pokemon/${idPokemon}`)
.then((resposta) => resposta.json())
.then((detalhes) => {
avatarImgEl.src = detalhes.sprites.front_default;
detailAvatarImgEl.src = detalhes.sprites.front_default;
detailNumberEl.innerHTML = String(detalhes.id).padStart(3,"0");
detailNameEl.innerHTML = capitalize(detalhes.name);
detailHeightEl.innerHTML = detalhes.height;
detailWeightEl.innerHTML = detalhes.weight;
detailTypesEl.innerHTML = "";
for(let tipo of detalhes.types){
detailTypesEl.innerHTML += typeTemplate(tipo.type.name);
}
});
});
});
backEl.addEventListener("click",showList);
});