pokeAPI/index.html at main · lejonck/pokeAPI · GitHub

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
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokedex</title>
</head>

<body>
    <h1>Pokedex</h1>
    <p>Insira o nome do Pokémon buscado (em inglês, apenas letras minúsculas)</p>
    <!-- Esse input é a caixa de texto onde vamos receber o nome do pokemon-->
    <input type="text" id="pokemon-nome">
    <!-- Botão que chama a função do JavaScript "pesquisarPokemon" quando é clicado-->
    <button onclick="pesquisarPokemon()">Buscar</button>
    <div id="pokemon-info">
        <!-- Espaço onde ficarão as informações buscadas do Pokémon -->
    </div>

    <script>
        /*Usamos uma função assíncrona para fazer a busca do pokemon, já que vamos fazer uma requisição http com fetch,
        e vamos precisar esperar o resultado dessa busca antes de seguir no código. Dessa forma, com na função assícrona podemos
        usar o await, que pausa a execução até que seja retornado o resultado da busca*/
        async function pesquisarPokemon() {
            //Vamos pegar o conteúdo do input do HTML, ou seja, o nome digitado, e salvamos na const 'pokemonNome'
            const pokemonNome = document.getElementById('pokemon-nome').value;
            //Buscamos no endereço da pokeapi, colocando o 'pokemonNome' no final para buscar o endereço específico
             const url = `https://pokeapi.co/api/v2/pokemon/${pokemonNome}`;


            /*usaremos try e catch, pois caso haja algum erro durante a execução do bloco try, ele para e
            passa para o catch, já informando do erro*/
            try {
                /*usamos a função fetch para fazer uma requisição http para o url que definimos acima, do pokeapi,
                e salvamos na const 'resposta' o resultado
                Usamos o await para indicar que é preciso esperar o retorno do fetch(busca), para continuar o código*/
                const resposta = await fetch(url);


                //A resposta da requisição tem um atributo 'ok', que retorna se a requisição foi bem sucedida ou não
                //Se não foi bem-sucedida, no caso o nome digitado não corresponde a um pokemon, mandamos um erro
                if (!resposta.ok) {
                    throw new Error('Pokémon não encontrado');
                }

                /*convertemos a const 'resposta' em formato json (formato padronizado de dados para comunicação
                entre servidor e cliente), para extrair os dados
                Também usamos o await para esperar que a resposta seja convertida, para então salvar em pokemonDados e continuar
                O pokeapi fornece vários recursos (informações) do pokemon*/
                const pokemonDados = await resposta.json();

                //Se deu tudo certo e conseguimos pegar os dados do pokemon, chamamos a função de mostrar os dados do pokemon no HTML
                mostrarInfoPokemon(pokemonDados);

            } catch (error) {
                alert(error.message);
            }
        }

        function mostrarInfoPokemon(pokemonDados) {
            //Nessa const, pegamos a div que separamos para exibir os dados do pokemon
            const pokemonInfoContainer = document.getElementById('pokemon-info');
            //Como alguns pokemons tem mais que um tipo, criamos uma string com os tipos separados por ','
            let tiposPokemon = '';
            //pokemonDados.tipos é um vetor dos tipos do pokemon. Usamos o índice para ver se é o último, e não colocar vírgula no fim
            pokemonDados.types.forEach(function (type, index) {
                //Arescentamos cada elemento na string
                tiposPokemon += type.type.name;
                //Se não é o último elemento, acrescenta vírgula
                if (index < pokemonDados.types.length - 1) {
                    tiposPokemon += ', ';
                }
            });
            const imagem = pokemonDados.sprites.front_default
            /*Acessamos os recursos do pokemon, que estao salvos em 'pokemonDados', usando o nome que é dado no pokeapi, aqui
            vamos pegar o name, id, height, weight, e types (salvos no vetor tiposPokemon)
            Exibimos os dados buscados na div 'pokemon-info' que reservamos*/
            pokemonInfoContainer.innerHTML = `
                <h2>${pokemonDados.name}</h2>
                <p>Número: ${pokemonDados.id}</p>
                <p>Altura: ${(pokemonDados.height)/10} m</p>
                <p>Peso: ${(pokemonDados.weight)/10} kg</p>
                <p>Tipos: ${tiposPokemon}</p>
                <img src="${imagem}" alt="${pokemonDados.name}">
            `;
        }
    </script>
</body>

</html>