Consumindo uma API de pokemon com Javascript

Prévia do material em texto

30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 1/25
Consumindo uma API de pokemon com
Javascript
 01/03/2018 |  17 minutos de leitura
Javascript
Essa semana eu estava dando uma olhada em algumas vagas no Front End Brasil e
notei que muitas vagas pediam experiência com o uso de API’s. Fui correndo pro
fórum do Front End Brasil e perguntei: “Como saber se tenho Experiência com API’s?”
Com a contribuição do pessoal eu consegui entender um pouco mais sobre API’s e
resolvi compartilhar um pouco do meu aprendizado.
Esse artigo foi inspirado em How to connect to an api with javascript e nele vou
mostrar como consumir e manipular os dados de uma API com informações sobre
pokemons.
Caso queira já pode dar uma olhada no que será construído nesse artigo.
Demonstração
Códigos
 Voltar
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/tags/Javascript/
https://github.com/frontendbr/
https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
https://crisgon.github.io/pokeinfo
https://github.com/crisgon/pokeinfo
https://crisgon.github.io/index.html
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 2/25
O que é uma API?
Se dermos uma “googlada” vamos dar de cara com a seguinte descrição no wikipedia:
“Interface de Programação de Aplicações (português europeu) ou Interface de
Programação de Aplicação (português brasileiro)), cujo acrônimo API provém do
Inglês Application Programming 
Interface, é um conjunto de rotinas e padrões estabelecidos por um software para
a utilização 
das suas funcionalidades por aplicativos que não pretendem envolver-se em
detalhes da implementação do software, mas apenas usar seus serviços. 
De modo geral, a API é composta por uma série de funções acessíveis somente por
programação, e que permitem utilizar características do software menos evidentes
ao utilizador tradicional.” 
De forma mais crua, uma API provê uma interface que permite que um software se
comunique com outro software sem que seja necessário ter conhecimento do que
acontece por de baixo dos panos.
Ou seja, uma API pode permitir que tenhamos acesso a geolocalização sem que
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 3/25
precisemos saber que blocos de códigos são executadas para que essa geolocalização
seja fornecida, pode permitir que seja possível criar contas utilizando o facebook,
google ou twitter, ou pode simplismente nos fornecer informações sobre livros.
Vale ressaltar que as API’s não se limitam apenas a WEB, elas estão presentes em
diversos outros cenários, como o dos SO’s, dos embarcados e vários outros. Porém se
tratando do cenário WEB as API’s se baseiam em requisições e respostas HTTP
(requests e responses), que na maioria das vezes seguem o padrão XML ou JSON.
Para entender sobre API’s de forma mais clara faça a leitura desses artigos:
O que é API
Nobody introduced me to the API.
Interface de programação de aplicações
Hey! Oh!, let’s go!
Antes de iniciar quero deixar claro que essa aplicação foi totalmente
desenvolvida por mim, então é capaz de conter pequenos bugs e também pode
ser que as técnicas que utilizei não tenham sido as melhores, porém senti a
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://canaltech.com.br/software/o-que-e-api/
https://www.robinwieruch.de/what-is-an-api-javascript/
https://pt.wikipedia.org/wiki/Interface_de_programa%C3%A7%C3%A3o_de_aplica%C3%A7%C3%B5es
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 4/25
necessidade de compartilhar o conhecimento sobre API’s que consegui até
agora. 
Vamos construir uma pequena aplicação que recebe o nome ou o número de um
pokemon e retorna algumas informações sobre o mesmo.
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 5/25
Aplicação utilizando dados de pokemons. 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 6/25
Vamos utilizar os dados da pokeapi, toda informação adicional necessária se encontra
na documentação da API.
O HTML e o CSS
O foco desse artigo é o javascript, então não vou explicar sobre o HTML e CSS, mas
basicamente temos o seguinte HTML:
Além do form, temos uma section que irá receber os dados dos pokemons e um span
que irá aparecer quando uma busca não for bem sucedida.
Caso queira pode fazer o download do HTML e do CSS
O Javascript
<main class="container"> 
 <img src="https://upload.wikimedia.org/wikipedia/commons/9/98/International_P
 
 <form action="" class="search"> 
 <input type="search" class="search-input" placeholder="Search about a pokem
 <button class="search-button">Search</button> 
 </form> 
 
 <section class="pokemon"> 
 </section> 
 <span class="error">Not Found!</span> 
 </main> 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://pokeapi.co/
https://github.com/crisgon/pokeinfo/blob/gh-pages/index.html
https://github.com/crisgon/pokeinfo/blob/gh-pages/pokemons.css
https://upload.wikimedia.org/wikipedia/commons/9/98/International_Pok%C3%A9mon_logo.svg
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 7/25
A primeiracoisa que iremos fazer é de�nir uma constante(também pode ser uma
variável) com o URL da API, que também é chamada de endpoint.
// API endpoint 
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/'; 
Agora iremos criar uma pequena função para diminuir a escrita na hora de pegar os
elementos HTML.
function getElement(element) { 
 return document.querySelector(element); 
} 
Logo em seguida iremos capturar os elementos HTML e criar 3 variáveis globais que
usaremos futuramente.
// Get Elements 
const searchInput = getElement('.search-input'), 
 searchButton = getElement('.search-button'), 
 container = getElement('.pokemon'), 
 erroMessage = getElement('.error'); 
 
var pokeName, // Nome ou numero passado na caixa de busca 
 pokemon, // Responsavel por guardar os dados recebidos da API 
 card; // Responsavel por receber o HTML 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
http://pokeapi.co/api/v2/pokemon/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 8/25
Você pode dar um console.log() em cada uma das constantes para veri�car se a
captura foi feita corretamente.
Agora vamos estabelecer nossa primeira conexão com a API. Existem diversas
maneiras de fazer isso, uma bem usual é utilizando o XMLHttpRequest(), porém
utilizaremos o fetch por sua praticidade.
fetch('https://pokeapi.co/api/v2/pokemon/pikachu') 
 .then(response => response.json()) 
 .then(data => console.log(data)) 
 .catch(err => console.log(err)); 
Abra o console do seu navegador e veja que agora temos um objeto com informações
sobre o pokemon pikachu.
Uma explicação rápida sobre o fetch: Ele é composto por promisses javascript, e
basicamente o primeiro .then() recebe a resposta da requisição e por meio de
uma função transformamos essa resposta em um json, logo depois o segundo
.then() recebe essa resposta, e a imprime no console. Por �m temos o catch que
só é executado caso aconteça algum erro na operação e a imprime uma
mensagem de erro console. 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://pokeapi.co/api/v2/pokemon/pikachu
https://braziljs.org/blog/promises-no-javascript/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 9/25
Agora já sabemos como fazer uma requisição! Se você se atentou, precisamos apenas
mudar a URL para conseguir informações sobre outro pokemon. Faça o teste
substituindo pikachu por outro nome ou algum número.
Vamos fazer algumas alterações no nosso código e ele deve �car assim:
// API endpoint -------------------------------------------- 
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/'; 
 
// Get Elements -------------------------------------------- 
const searchInput = getElement('.search-input'), 
 searchButton = getElement('.search-button'), 
 container = getElement('.pokemon'), 
 erroMessage = getElement('.error'); 
 
var pokeName, // Nome ou numero passado na caixa de busca 
 pokemon, // Responsavel por guardar os dados recebidos da API 
 card; // Responsavel por receber o HTML 
 
// Build Functions -------------------------------------------- 
 
// Função para reduzir a escrita na captura de elementos HTML 
function getElement(element) { 
 return document.querySelector(element); 
} 
 
// Função responsavel por fazer requisições para a API e inserir as respostas na 
function requestPokeInfo(url, name) { 
 fetch(url + name) 
 .then(response => response.json()) 
 .then(data => { 
 pokemon = data; 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://pokeapi.co/api/v2/pokemon/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 10/25
Já sabemos como receber os dados de um pokemon, porém ainda não temos nada
dinâmico… Então vamos pegar o valor da caixa de pesquisa e utiliza-lo para pesquisar
por um pokemon. Para isso vamos adicionar um evento de click ao botão e atribuir o
valor do input para a variável pokeName, que será passada como argumento para
nossa função que faz a requisição para a API.
Agora podemos escrever o nome de um pokemon e receber dados sobre ele no
console do navegador. Faça o teste!! Eai, funcionou?
Agora vamos trazer os dados que estão no console para o nosso documento HTML,
pois ninguém quer �car abrindo o console pra �car visualizando informações. 😃
 }) 
 .catch(err => console.log(err)); 
} 
 
console.log(pokemon); // Execute o console para verificar os dados no console 
searchButton.addEventListener('click', event => { 
 event.preventDefault(); 
 pokeName = searchInput.value.toLowerCase(); 
 /* A api só aceita nomes minusculos, então vamos usar a função toLowerCase para
 requestPokeInfo(baseUrl, pokeName) 
}); 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 11/25
A nossa resposta é um objeto, então podemos acessar suas propriedades como
em qualquer objeto javascript. Para recuperarmos o nome do pokemon podemos
executar pokemon.name, para o número usamos o pokemon.id e todas as outras
informações seguem a mesma lógica.
Vamos criar uma função que irá montar um HTML. Recomendo que pesquise por
template strings caso ache a sintaxe ${} estranha.
O weight e o height (peso e altura) eles vem multiplicados por 10, descobri isso
comparando as informações com as do site o�cial do Pokemon. Por isso estou
dividindo ambos por 10. 
function createCard () { 
 card = ` 
 <div class="pokemon-picture"> 
 <img src="${pokemon.sprites.front_default}" alt="Sprite of ${pokemon.name}"
 </div> 
 <div class="pokemon-info"> 
 <h1 class="name">Name: ${pokemon.name}</h1> 
 <h2 class="number">Nº ${pokemon.id}</h2> 
 <h3 class="type">Type: ${pokemon.types.map(item => ' ' + item.type.name)
 <h3 class="skill">Skills: ${pokemon.moves.map(item => ' ' + item.move.nam
 <h3 class="weight">Weight: ${pokemon.weight / 10}kg</h3> 
 <h3 class="height">Height: ${pokemon.height / 10}m</h3> 
 </div>`; 
 return card; 
} 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projectshttps://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 12/25
Outra coisa importante são as informações type e skills (tipo e habilidades).
Ambas podem conter um valor ou vários, sendo retornadas como um array. Então
utilizei o map para criar um novo array com espaços e logo em seguida converti
tudo em string. 
Logo em seguida adicione esse pequeno trecho container.innerHTML = createCard();
na
função do addEventListener do botão, atualize a página e pesquise por um pokemon.
Ocorreu algum erro? Certo, vamos corrigir!
O erro acontece porque a função que cria o HTML foi executada antes da requisição
terminar, logo temos a mensagem de que não podemos acessar propriedades de
unde�ned. Para resolver isso precisamos fazer com que nossa função que cria o HTML
espere um pouco antes de ser executada, vamos utilizar o setTimeout, porém
recomendo que pesquise sobre javascript assíncrono.
Criaremos uma função principal que será responsável por fazer a chamada de todas as
outras funções existentes.
// Função que faz a chamada das principais funções e inicia o app 
function startApp(pokeName) { 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://braziljs.org/blog/tag/javascript-assincrono/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 13/25
Faça uma mudança na função de click do botão, faça com que a única função a ser
executada seja a startApp.
Com as alterações feitas nosso código deve �car assim
 requestPokeInfo(baseUrl, pokeName); 
 
 // A função que cria o HTML só será executada 2 segundos depois que a função st
 setTimeout(function () { 
 container.innerHTML = createCard(); 
 }, 2000); 
} 
// API endpoint -------------------------------------------- 
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/'; 
 
// Get Elements -------------------------------------------- 
const searchInput = getElement('.search-input'), 
 searchButton = getElement('.search-button'), 
 container = getElement('.pokemon'), 
 erroMessage = getElement('.error'); 
 
var pokeName, // Nome ou numero passado na caixa de busca 
 pokemon, // Responsavel por guardar os dados recebidos da API 
 card; // Responsavel por receber o HTML 
 
// Build Functions -------------------------------------------- 
 
// Função para reduzir a escrita na captura de elementos HTML 
function getElement(element) { 
 return document.querySelector(element); 
} 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://pokeapi.co/api/v2/pokemon/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 14/25
 
// Função responsavel por fazer requisições para a API e inserir as respostas na 
function requestPokeInfo(url, name) { 
 fetch(url + name) 
 .then(response => response.json()) 
 .then(data => { 
 pokemon = data; 
 }) 
 .catch(err => console.log(err)); 
} 
 
// Função responsavel por montar o HTML exibido na pagina 
function createCard () { 
 card = ` 
 <div class="pokemon-picture"> 
 <img src="${pokemon.sprites.front_default}" alt="Sprite of ${pokemon.name}"
 </div> 
 <div class="pokemon-info"> 
 <h1 class="name">Name: ${pokemon.name}</h1> 
 <h2 class="number">Nº ${pokemon.id}</h2> 
 <h3 class="type">Type: ${pokemon.types.map(item => item.type.name).toStri
 <h3 class="skill">Skills: ${pokemon.moves.map(item => ' ' + item.move.nam
 <h3 class="weight">Weight: ${pokemon.weight / 10}kg</h3> 
 <h3 class="height">Height: ${pokemon.height / 10}m</h3> 
 </div>`; 
 return card; 
} 
 
// Função que faz a chamada das principais funções e inicia o app 
function startApp(pokeName) { 
 requestPokeInfo(baseUrl, pokeName); 
 
 setTimeout(function () { 
 container.innerHTML = createCard(); 
 }, 2000); 
} 
 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 15/25
Já podemos dar o nosso APP como �nalizado, então o que vem a seguir é opcional.
A primeira grande mudança que iremos fazer é na função principal
function startApp(pokeName) { 
 requestPokeInfo(baseUrl, pokeName); 
 
 setTimeout(function () { 
 //Exibe uma mensagem caso o pokemon pesquisado não exista 
 if(pokemon.detail) { 
 erroMessage.style.display = 'block'; 
 container.style.display = 'none'; 
 }else{ 
 erroMessage.style.display = 'none'; 
 container.style.display = 'flex'; 
 container.innerHTML = createCard(); 
 } 
 }, 2000); 
} 
Quando uma pesquisa é mal sucedida o retorno é a informação detail. Então
veri�camos se existe o detail no objeto pokemon, caso exista nós mudamos o display
// Add Events -------------------------------------------- 
searchButton.addEventListener('click', event => { 
 event.preventDefault(); 
 pokeName = searchInput.value.toLowerCase(); 
 startApp(pokeName); 
}); 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 16/25
da tag que contém a mensagem de erro para block e mudamos o display da section
com as informações do pokemon para none.
Se a propriedade detail não existir, signi�ca que a busca foi bem sucedida, então
escondemos a mensagem de erro, mostramos a section com as informações e
chamamos a função que monta o html.
A próxima grande mudança é no evento de click
// Add Events -------------------------------------------- 
searchButton.addEventListener('click', event => { 
 event.preventDefault(); 
 pokeName = searchInput.value.toLowerCase(); 
 startApp(pokeName); 
 container.classList.add('fade'); 
 
 // Reseta o efeito fade removendo a classe fade 
 setTimeout(() => { 
 container.classList.remove('fade'); 
 }, 3000); 
}); 
Aqui estamos adicionando a classe ‘fade’ ao nosso container, essa classe é responsável
por fazer um efeito de transição suave.
Logo depois utilizamos o setTimeout() para remover a classe fade depois de 3
segundos para que ela possa seradicionada novamente no próximo evento de click.
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 17/25
No �m de tudo o código deve �car assim
// API endpoint -------------------------------------------- 
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/'; 
 
// Get Elements -------------------------------------------- 
const searchInput = getElement('.search-input'), 
 searchButton = getElement('.search-button'), 
 container = getElement('.pokemon'), 
 erroMessage = getElement('.error'); 
 
var pokeName, // Nome ou numero passado na caixa de busca 
 pokemon, // Responsavel por guardar os dados recebidos da API 
 card; // Responsavel por receber o HTML 
 
// Build Functions -------------------------------------------- 
 
// Função para reduzir a escrita na captura de elementos HTML 
function getElement(element) { 
 return document.querySelector(element); 
} 
 
// Função responsavel por fazer requisições para a API e inserir as respostas na 
function requestPokeInfo(url, name) { 
 fetch(url + name) 
 .then(response => response.json()) 
 .then(data => { 
 pokemon = data; 
 }) 
 .catch(err => console.log(err)); 
} 
 
// Função responsavel por montar o HTML exibido na pagina 
function createCard () { 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://pokeapi.co/api/v2/pokemon/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 18/25
 card = ` 
 <div class="pokemon-picture"> 
 <img src="${pokemon.sprites.front_default}" alt="Sprite of ${pokemon.name}"
 </div> 
 <div class="pokemon-info"> 
 <h1 class="name">Name: ${pokemon.name}</h1> 
 <h2 class="number">Nº ${pokemon.id}</h2> 
 <h3 class="type">Type: ${pokemon.types.map(item => item.type.name).toStri
 <h3 class="skill">Skills: ${pokemon.moves.map(item => ' ' + item.move.nam
 <h3 class="weight">Weight: ${pokemon.weight / 10}kg</h3> 
 <h3 class="height">Height: ${pokemon.height / 10}m</h3> 
 </div>`; 
 return card; 
} 
 
// Função que faz a chamada das principais funções e inicia o app 
function startApp(pokeName) { 
 requestPokeInfo(baseUrl, pokeName); 
 
 setTimeout(function () { 
 //Exibe uma mensagem caso o pokemon pesquisado não exista 
 if(pokemon.detail) { 
 erroMessage.style.display = 'block'; 
 container.style.display = 'none'; 
 }else{ 
 erroMessage.style.display = 'none'; 
 container.style.display = 'flex'; 
 container.innerHTML = createCard(); 
 } 
 }, 2000); 
} 
 
// Add Events -------------------------------------------- 
searchButton.addEventListener('click', event => { 
 event.preventDefault(); 
 pokeName = searchInput.value.toLowerCase(); 
 startApp(pokeName); 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 19/25
Isso é tudo, pessoal!!
Esse artigo foi um pouco mais extenso que o normal, mas foi muito enriquecedor para
mim, espero que tenha acrescentado algo nos seus estudos. Provavelmente eu devo
ter me equivocado em algum momento ou deixado alguma informação confusa, caso
tenha visto algo do tipo é só me avisar, isso vai ajudar muito na minha caminhada para
ser um Front End Developer!
Todo esse conteúdo foi feito com base nos seguintes links:
How to connect to an api with javascript
O que é API
Nobody introduced me to the API.
Interface de programação de aplicações
Front End Brasil
 container.classList.add('fade'); 
 
 // Reseta o efeito fade removendo a classe fade 
 setTimeout(() => { 
 container.classList.remove('fade'); 
 }, 3000); 
}); 
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
https://canaltech.com.br/software/o-que-e-api/
https://www.robinwieruch.de/what-is-an-api-javascript/
https://pt.wikipedia.org/wiki/Interface_de_programa%C3%A7%C3%A3o_de_aplica%C3%A7%C3%B5es
https://github.com/frontendbr/forum/issues
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 20/25
Obrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa
um comentário caso tenha alguma sugestão do que posso melhorar.
TAMBÉM NO CRISTIANO GONÇALVES
há 4 anos 19 COMENTÁRI…
Sabe aquela vaga maneira 
que você pensou em se 
candidatar, mas desistiu …
Minha jornada criandoMinha jornada criando
30 sites em 30 dias30 sites em 30 dias
• há 4 anos 2 COMENTÁRIOS
O uso de arrays no 
javascript é algo bastante 
comum devido a sua …
Usando Arrays comUsando Arrays com
JavaScriptJavaScript
• há 4 anos 2 COMENTÁRIOS
No momento em que 
vivemos, não é tão difícil 
encontrar artigos sobre …
Todo dia um blogTodo dia um blog
diferentediferente
• há 4 anos 4 C
Sempre me d
uma ou outra
css e meus p
DesenhandDesenhand
shadowshadow
•
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 21/25
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 22/25
Sponsored
Dr. Rafael Freitas
Cash Roadster
Game Of Glam
Arti Up Brasil
Dr. Rafael Freitas - Especialista em saúde masculina
Ci-Active
H dá l à d 2 d i l it d b há d t
Médico Brasileiro: Eu imploro aos Brasileiros que abandonem esses três alimentosAcredite, este é o valor que Silvio Santos tem em sua conta bancária
Acredite, este é o salário de Paolla Oliveira
Dores constantes nas juntas: Basta uma dose disto 1x ao dia
Médico ensina homens acima dos 40 a urinar como jovem em 30 dias, com um simples ritual
caseiro.
Dor nas costas, ciático ou coluna? Faça isso todos os dias
Comentários Comunidade 🔒 Política de privacidade
 Ima
t Tweet f Partilhar Favorite  2
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://info.doutornature.com/sfunnel/2081/?tb_campanha=Vital-3.1&tb_publisher=disqus-widget-safetylevel20longtail09&tb_ad=M%C3%A9dico+Brasileiro%3A+Eu+imploro+aos+Brasileiros+que+abandonem+esses+tr%C3%AAs+alimentos&tb_creative=http%3A%2F%2Fcdn.taboola.com%2Flibtrc%2Fstatic%2Fthumbnails%2F1b0c70e52a40f8449f5410ed51d86901.png&tb_campaign_name=%5BVital-3.1%5D%5BDesktop%5D%5BF2%5D%5BDesc%5D%5BWL%5D%5BAdv35%5D%5B14-10%5D%5Bsfunnel%3D2081%5D&utm_source=Taboola&utm_medium=cpc&utm_content=vital_adv35&utm_term=vital_3alimentos&tblci=GiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCCdwUMopr33p4_SlfNm#tblciGiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCCdwUMopr33p4_SlfNm
https://cashroadster.com/trending/as-celebridades-sao-donas-de-verdadeiras-fortunas-voce-tem-ideia-quanto-elas-ganham-entao-vamos-embarcar-nessa-e-descobrir-quanto-elas-ganham-mh?utm_source=taboola&utm_medium=disqus-widget-safetylevel20longtail09&utm_campaign=13091368&utm_term=Acredite%2C+este+%C3%A9+o+valor+que+Silvio+Santos+tem+em+sua+conta+banc%C3%A1ria&utm_content=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fb%2Fb8%2F15_12_2020_Lan%25C3%25A7amento_de_selo_alusivo_ao_anivers%25C3%25A1rio_de_90_anos_do_comunicador_Silvio_Santos_%252850724490531%2529_%2528cropped%2529.jpg&ts=2021-10-30+18%3A30%3A42&tbv=3frAtV-5ndUPFroiVF0Fy3oXjmtuoyj2Ji5VS7P0TxU=&pcl=1&br=1
https://gameofglam.com/veja-qual-e-o-salario-dessas-celebridades-2-mh/?utm_source=taboola&utm_medium=disqus-widget-safetylevel20longtail09&utm_campaign=13114743&utm_term=Acredite%2C+este+%C3%A9+o+sal%C3%A1rio+de+Paolla+Oliveira&utm_content=https%3A%2F%2Ftititi.perfil.com%2Fwp-content%2Fuploads%2F2021%2F04%2Fpaolla-oliveira-de-biquini.jpg&ts=2021-10-30+18%3A30%3A42&tbv=SyCSYFYxxbZYJSQubeXuXnoXjmtuoyj2Ji5VS7P0TxU=&pcl=1&br=1
https://gonext.me/at1709-2mb?tblci=GiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCDv3kIot67qu9KarPa8AQ#tblciGiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCDv3kIot67qu9KarPa8AQ
https://info.doutornature.com/sfunnel/4515/?tb_campanha=Prosta-6.1&tb_publisher=disqus-widget-safetylevel20longtail09&tb_ad=M%C3%A9dico+ensina+homens+acima+dos+40+a+urinar+como+jovem+em+30+dias%2C+com+um+simples+ritual+caseiro.&tb_creative=http%3A%2F%2Fcdn.taboola.com%2Flibtrc%2Fstatic%2Fthumbnails%2F58a5ab1766b2819ef40449243c0d3a0e.jpg&tb_campaign_name=%5BProsta-6.1%5D%5BDesktop%5D%5BWL%5D%5BAdv3%5D%5BF1%5D%5B18-08%5D%5Bsfunnel%3D4515%5D&utm_source=Taboola&utm_medium=cp&tb_tipo_funil=vsl&utm_content=prosta_adv3&utm_term=prosta_jovem&tblci=GiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCDTkVUoouKK7srM-fwr#tblciGiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCDTkVUoouKK7srM-fwr
https://belyrists-homisted.icu/b3060465-6dd0-4820-83e6-0fbaf4182c1d?site=disqus-widget-safetylevel20longtail09&site_id=1042962&title=Dor+nas+costas%2C+ci%C3%A1tico+ou+coluna%3F+Fa%C3%A7a+isso+todos+os+dias&platform=Desktop&campaign_id=12846880&campaign_item_id=3036106412&thumbnail=http%3A%2F%2Fcdn.taboola.com%2Flibtrc%2Fstatic%2Fthumbnails%2Fc3649e5ec0f2ae20690986d88f4f9ff1.jpg&click_id=GiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCCKq1UonZbF4sagy4B6&utm_source=taboola&utm_medium=referral&tblci=GiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCCKq1UonZbF4sagy4B6#tblciGiD924aEPC1Io-yqqvNIFKiDw5KF_JJJRqrL2oLT4lw3QCCKq1UonZbF4sagy4B6
https://rfvtgb.history10.com/worldwide/mulher-segredo-colar-pr?utm_medium=taboola&utm_source=taboola&utm_campaign=ta-hy-gurmet-f-des-bz-wl-yk-27101&utm_term=disqus-widget-safetylevel20longtail09&utm_bid=DD0eD90JNMOrvcduUL5OM3P4iMt17yz7WUX7WcrNcO0=&utm_geo=pr
https://disqus.com/home/forums/cristiano-goncalves/
https://help.disqus.com/customer/portal/articles/466259-privacy-policy
https://disqus.com/home/inbox/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 23/25
Mostrar primeiro os mais votados
Escreva o seu comentário...
Tyago Machado • há 2 anos
• Responder •
Cara, parabéns, muito bom o conteudo e a forma que
explicou ele.
Me ajudou muito.
Obrigado.
 3△ ▽
Breno Silva • há 7 meses
• Responder •
Parabéns, muito bem explicado, muito bom mesmo, muito
conhecimento em um post tão simples, conhecimento para
qualquer profissional tanto de front quanto back end. Muito
obrigado irmão.
 2△ ▽
Partilhar ›
Partilhar ›
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://disqus.com/by/tyago_machado/
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/#comment-4840606694
https://disqus.com/by/disqus_O4AkooCY4c/
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/#comment-5335684090
https://disqus.com/by/tyago_machado/
https://disqus.com/by/disqus_O4AkooCY4c/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 24/25
Sponsored
Dr. Rafael Freitas
History 10
Chip da Beleza
Comfort Shoes
Nail Cure
Oferta premium
Médico Brasileiro: Eu imploro aos Brasileiros que abandonem esses três alimentos
[Fotos] Famosos falidos trabalhando em empregos comuns
As exclusivas selecionadas com desconto e frete grátis
Saiba mais
Sapatênis masculino de couro legítimo Virtus.
Comprar agora
Novo método para tratar fungos nas unhas vira febre em Bom Jesus Do Amparo
Coleção de camisas com frete grátis e desconto
Saiba mais
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://info.doutornature.com/sfunnel/2081/?tb_campanha=Vital-3.1&tb_publisher=disqus-widget-safetylevel20longtail09&tb_ad=M%C3%A9dico+Brasileiro%3A+Eu+imploro+aos+Brasileiros+que+abandonem+esses+tr%C3%AAs+alimentos&tb_creative=http%3A%2F%2Fcdn.taboola.com%2Flibtrc%2Fstatic%2Fthumbnails%2F1b0c70e52a40f8449f5410ed51d86901.png&tb_campaign_name=%5BVital-3.1%5D%5BDesktop%5D%5BF2%5D%5BDesc%5D%5BWL%5D%5BAdv35%5D%5B14-10%5D%5Bsfunnel%3D2081%5D&utm_source=Taboola&utm_medium=cpc&utm_content=vital_adv35&utm_term=vital_3alimentos&tblci=GiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iCdwUMo_aD207CV8siLAQ#tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iCdwUMo_aD207CV8siLAQ
https://rfvtgb.history10.com/worldwide/artistas-brasileiros-famosos-charlie-ta-pr?utm_medium=taboola&utm_source=taboola&utm_campaign=ta-hy-poorcel-s-des-bz-ns-13081d&utm_term=disqus-widget-safetylevel20longtail09&utm_bid=adLHmpWlBU6YZeFqFMB4n71hcbcn8js3ZA3KJ6q6w1Q=&utm_geo=pr
https://www.dexcubras.com/products/dz2?utm_source=taboola&utm_medium=referral&tblci=GiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDQrVYo6JjBy-HInLJI#tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDQrVYo6JjBy-HInLJI
https://www.comfortshoes.com.br/Sapatenis-Masculino-De-Couro-Legitimo-Virtus-Preto-44706?utm_source=taboola&utm_medium=[44706][DESK]#tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iD72Eoo6_Hq9vOmn42aAQ
https://go.nailcureoficial.com/?flux_fts=tzqaitczoictzxapitcecxoxoictclolzqiqoz3e926&utm_source=taboola&utm_campaign=NC0915D1&utm_medium=disqus-widget-safetylevel20longtail09&utm_content=3031954565&site=disqus-widget-safetylevel20longtail09&site_id=1042962&campaign_id=12531371&campaign_item_id=3031954565&tb_click_id=GiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDXk1EoiovdtJvt6fR9&title=Novo+m%C3%A9todo+para+tratar+fungos+nas+unhas+vira+febre+em+Bom+Jesus+Do+Amparo&thumbnail=http%3A%2F%2Fcdn.taboola.com%2Flibtrc%2Fstatic%2Fthumbnails%2F5a6b05872bfeb197f980372f8587a879.png&platform=Desktop&timestamp=2021-10-30+18%3A30%3A42&tblci=GiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDXk1EoiovdtJvt6fR9#tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDXk1EoiovdtJvt6fR9https://www.dexcubras.com/products/combo6premium?utm_source=taboola&utm_medium=referral&tblci=GiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDhvlUozc3L997dld7iAQ#tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDhvlUozc3L997dld7iAQ
https://trc.taboola.com/disqus-widget-safetylevel20longtail09/log/3/click?pi=%2Fposts%2Fconsumindo-uma-api-de-pokemon-com-javascript&ri=133a7c09b3d1d130e2bf7fbf211c7ca7&sd=v2_872ad85f7f3bd5540bdde8d012c16a74_364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2_1635618642_1635618642_CIi3jgYQktQ_GNWp35PNLyABKAEwHzjb1AdA8YcQSI6h4QNQ5tEEWABgAGiq1e69zq2_yFNwAQ&ui=364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2&it=text&ii=~~V1~~-1586377841999056914~~oVXTm_bnbzZ_wUYG589c0e6RSGEpAu6lmfuZ5QyMYhMndpXq_nTToVci-tV_1bYyPVPbFHdycXfyr1VxmozLcWANN93_dhGoNVU93HODOAawecwlYupV-ADLiqSJCBxnkF2brjDLkjXtE0mWjyPKoFnFXeb-uloOOUnZR6JMi7sTg-_9RYbLFsJaIWAlQOQFP8Mj0SpiSYWwDT9FkUszAJ6UGFyM2__RSqMPQoGPLAm-zLncZrQpCnl9J2eoiLP6RBG5oa8K5ymyZoQEYhZoTD57lt7KjKx7radfjBemEiGSChHagW0o0KT2k8fyn3_CmUt5dQdKHDSD-IROEG5rKQ&pt=text&li=rbox-t2m&sig=8aeb4f9b310f0fef4e446fcd12b91259172c36717c24&redir=https%3A%2F%2Fwww.dexcubras.com%2Fproducts%2Fdz2%3Futm_source%3Dtaboola%26utm_medium%3Dreferral%26tblci%3DGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDQrVYo6JjBy-HInLJI%23tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDQrVYo6JjBy-HInLJI&vi=1635618641109&p=johnlucas-br-c2-sc&r=19&lti=deflated&ppb=CEU&cpb=EhIyMDIxMTAyOC0yLVJFTEVBU0UYzpodIAAqGXVzLnRhYm9vbGFzeW5kaWNhdGlvbi5jb20yCndhdGVyMTAxMjU4gJav7wJA29QHSPGHEFCOoeEDWObRBGMI1xYQ1R8YI2RjCNz__________wEQ3P__________ARgkZGMI0gMQ4AYYCGRjCJYUEJ8cGBhkYwjn__________8BEOf__________wEYGWRjCPQUEJ4dGB9keAGAAQKIAam6mcQB&cta=true
https://trc.taboola.com/disqus-widget-safetylevel20longtail09/log/3/click?pi=%2Fposts%2Fconsumindo-uma-api-de-pokemon-com-javascript&ri=133a7c09b3d1d130e2bf7fbf211c7ca7&sd=v2_872ad85f7f3bd5540bdde8d012c16a74_364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2_1635618642_1635618642_CIi3jgYQktQ_GNWp35PNLyABKAEwHzjb1AdA8YcQSI6h4QNQ5tEEWABgAGiq1e69zq2_yFNwAQ&ui=364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2&it=text&ii=~~V1~~1802802830147828684~~6kibd9wTYgB5vNgL1Almma0DVoF7vuk91srqNeaOU3RFiu7t5aMeQv_OvQ_xsFedK8Bm7FKD2NW1M1BCiW1-kuMDMqg65-jJbi04eURsbtqeHe1S9jo_X4timp5pCZhQ1qPnz8TIp56FGMwGW1REdGP6mCOrMydSrc5toiHgFWDXWC7fMmXKFK3QKp3Ct8jnlILWlLG9BAl1qIKEbVJE0_5ntbk2zYiLjCF2vU1R4fVIgoh9LgevFw_S7lTgZsfl335JyUpoDQWuuLi1-DNuCjUngz45m_xqzOz1Bq1Qy7I&pt=text&li=rbox-t2m&sig=2f2c4b327c4800ade8c670c5969f151a302c1e648bbb&redir=https%3A%2F%2Fwww.comfortshoes.com.br%2FSapatenis-Masculino-De-Couro-Legitimo-Virtus-Preto-44706%3Futm_source%3Dtaboola%26utm_medium%3D%5B44706%5D%5BDESK%5D%23tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iD72Eoo6_Hq9vOmn42aAQ&vi=1635618641109&p=taboolaaccount-contatocomfortshoesgmailcom&r=57&lti=deflated&ppb=CEU&cpb=EhIyMDIxMTAyOC0yLVJFTEVBU0UYzpodIAAqGXVzLnRhYm9vbGFzeW5kaWNhdGlvbi5jb20yCndhdGVyMTAxMjU4gJav7wJA29QHSPGHEFCOoeEDWObRBGMI1xYQ1R8YI2RjCNz__________wEQ3P__________ARgkZGMI0gMQ4AYYCGRjCJYUEJ8cGBhkYwjn__________8BEOf__________wEYGWRjCPQUEJ4dGB9keAGAAQKIAam6mcQB&cta=true
https://trc.taboola.com/disqus-widget-safetylevel20longtail09/log/3/click?pi=%2Fposts%2Fconsumindo-uma-api-de-pokemon-com-javascript&ri=133a7c09b3d1d130e2bf7fbf211c7ca7&sd=v2_872ad85f7f3bd5540bdde8d012c16a74_364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2_1635618642_1635618642_CIi3jgYQktQ_GNWp35PNLyABKAEwHzjb1AdA8YcQSI6h4QNQ5tEEWABgAGiq1e69zq2_yFNwAQ&ui=364f6b38-bf58-424b-92c8-118b0c3b719c-tuct87714d2&it=text&ii=~~V1~~-6393319293191170596~~iTGIP2ydVMmBjgM-ZnArw1BFElICVThcKGGinVKlGE0ndpXq_nTToVci-tV_1bYyPVPbFHdycXfyr1VxmozLcV7JbGFbjtizQN29Zpin8p1JlawpbYFtoRw_FVSAoDPy8yoVX_ZV1DUzrU9mgEqIxVpt34vkyVLCqQj-j_6Ik-WFwt9_72reDSrMsTKuuUo5hyXF24OjjFNPNPUkxZiwjkBWEJeUrf8VvEb8BcmNrNfUWhyuk-YstCHlUaN1s4zgpth6HksYgdxbGNX4O-kCPH2_ebAJesQ19_WjFWVI0Jm1W6GTjKSJ-fYMK4bIe9ZIRMiMsWt_J59zH-ihmwYd_g&pt=text&li=rbox-t2m&sig=7c168e659e05acb1c87584753f291f193e78c7394fdd&redir=https%3A%2F%2Fwww.dexcubras.com%2Fproducts%2Fcombo6premium%3Futm_source%3Dtaboola%26utm_medium%3Dreferral%26tblci%3DGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDhvlUozc3L997dld7iAQ%23tblciGiD39flgupKDuUAA01sLQ7J1ahnIVx_6-Sy2jtI94sng7iDhvlUozc3L997dld7iAQ&vi=1635618641109&p=johnlucas-reserva2-br-sc&r=31&lti=deflated&ppb=CEU&cpb=EhIyMDIxMTAyOC0yLVJFTEVBU0UYzpodIAAqGXVzLnRhYm9vbGFzeW5kaWNhdGlvbi5jb20yCndhdGVyMTAxMjU4gJav7wJA29QHSPGHEFCOoeEDWObRBGMI1xYQ1R8YI2RjCNz__________wEQ3P__________ARgkZGMI0gMQ4AYYCGRjCJYUEJ8cGBhkYwjn__________8BEOf__________wEYGWRjCPQUEJ4dGB9keAGAAQKIAam6mcQB&cta=true
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/
30/10/2021 15:47 Consumindo uma API de pokemon com Javascript
https://crisgon.github.io/posts/Consumindo-uma-API-de-pokemon-com-Javascript/ 25/25
© 2018 Cristiano Gonçalves.
Desenvolvido com Hexo. Inspirado no blog do Gabriel Ferreira.
Cristiano
Gonçalves
Home
Sobre
Projetos
Experimentos
    
https://hexo.io/
http://gabsferreira.com/
https://crisgon.github.io/
https://crisgon.github.io/
https://crisgon.github.io/about
https://crisgon.github.io/projects
https://crisgon.github.io/experiments
https://www.facebook.com/cris.gonn
https://twitter.com/Gonkristiano
https://www.linkedin.com/in/cristiano-gon%C3%A7alves-12a395105/
https://github.com/crisgon/
https://codepen.io/crisgon/