-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
79 lines (70 loc) · 2.58 KB
/
script.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
79
const pokemonID = document.getElementById("pokemon-id");
const pokemonName = document.getElementById("pokemon-name");
const sprite = document.getElementById("sprite");
const types = document.getElementById("types");
const height = document.getElementById("height");
const weight = document.getElementById("weight");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const searchForm = document.getElementById("search-form");
const searchInput = document.getElementById("search-input");
const getPokemon = async () => {
try {
const pokemonNameOrId = searchInput.value.toLowerCase();
const response = await fetch(
`https://pokeapi.co/api/v2/pokemon/${pokemonNameOrId}`
);
const data = await response.json();
console.log(data.sprites.front_default);
// Set Pokémon info
pokemonName.innerHTML = `${data.name.toUpperCase()}`;
pokemonID.innerHTML = `#${data.id}`;
weight.innerHTML = `Weight: ${data.weight}`;
height.innerHTML = `Height: ${data.height}`;
// Set stats
hp.innerHTML = data.stats[0].base_stat;
attack.innerHTML = data.stats[1].base_stat;
defense.innerHTML = data.stats[2].base_stat;
specialAttack.innerHTML = data.stats[3].base_stat;
specialDefense.innerHTML = data.stats[4].base_stat;
speed.innerHTML = data.stats[5].base_stat;
sprite.src = data.sprites.front_default;
sprite.alt = `${data.name} front default sprite`;
// Set types
let typesHTML = "";
data.types.forEach((obj) => {
typesHTML += `<span class="type ${obj.type.name}">${obj.type.name}</span>`;
});
types.innerHTML = typesHTML;
} catch (err) {
resetDisplay();
alert("Pokémon not found");
console.log(`Pokémon not found: ${err}`);
}
};
searchForm.addEventListener("submit", (e) => {
e.preventDefault();
getPokemon();
});
function resetDisplay() {
// reset to default display if pokemon is not found
// reset image src and alt
sprite.src = "";
sprite.alt = "";
// reset stats
pokemonName.innerHTML = "";
pokemonID.innerHTML = "";
types.innerHTML = "";
height.innerHTML = "";
weight.innerHTML = "";
hp.innerHTML = "";
attack.innerHTML = "";
defense.innerHTML = "";
specialAttack.innerHTML = "";
specialDefense.innerHTML = "";
speed.innerHTML = "";
}