Pok-dex/script.js at main · sousa2008/Pok-dex · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const button = document.querySelector("#button")
const resposta = document.querySelector("#resposta")
const input = document.querySelector("#pokemonName")

button.addEventListener("click", choosePokemon)
input.addEventListener("keydown", (event) => {
    if (event.key == "Enter") {
        choosePokemon()
    }
})


const name = document.querySelector("#name")

function choosePokemon() {

    const pokemonChoose = input.value

    console.log(pokemonChoose)

    fetchCall(`https://pokeapi.co/api/v2/pokemon/${pokemonChoose}`)

    if (pokemonChoose == 0) {
        descricao.innerHTML = `Pokemón não encontrado!`
        sprite.src = ''
        spriteShiny.src = ''

        throw new Error("Pokemon não encontrado");   //se não encontrar o pokemon, mostrar mensagem de erro

    }

    name.innerHTML = "Carregando..."       // Aparece até mostraros dados do server
    input.value = ''


}


async function fetchCall(URL) {
    const sprite = document.querySelector("#sprite")
    const spriteShiny = document.querySelector("#spriteShiny")
    const mainImg = document.querySelector("#mainImg")


    const height = document.querySelector("#height")
    const weight = document.querySelector("#weight")


    const number = document.querySelector("#number")
    const type = document.querySelector("#type")
    try {
        const server = await fetch(URL)

        if (!server.ok) {
            name.innerHTML = `Pokemón não encontrado!`
            sprite.src = ''
            spriteShiny.src = ''


            height.innerHTML = `-`
            weight.innerHTML = `-`

            mainImg.src = "img/error.png"

            number.innerHTML = `ID: -`
            type.innerHTML = `TIPO: -`
            throw new Error("Pokemon não encontrado");   //se não encontrar o pokemon, mostrar mensagem de erro


        }

        const dado = await server.json()               //espera o dado do url chegar, pois tem await

        console.log(dado)

        name.innerHTML = `${dado.name.toUpperCase()}`
        height.innerHTML = `${dado.height} m`
        weight.innerHTML = `${dado.weight / 10} kg`

        sprite.src = dado.sprites.front_default
        spriteShiny.src = dado.sprites.front_shiny
        mainImg.src = dado.sprites.other["official-artwork"].front_default

        number.innerHTML = `ID: ${dado.id}`
        type.innerHTML = `TIPO: ${dado.types[0].type.name}`


    }

    catch (error) {
        console.log(error)
        name.innerHTML = `Campo input vazio!`
        sprite.src = ''
        spriteShiny.src = ''


        height.innerHTML = `-`
        weight.innerHTML = `-`

        mainImg.src = "img/error.png"

        number.innerHTML = `ID: -`
        type.innerHTML = `TIPO: -`
    }


}