-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
121 lines (94 loc) · 4.39 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
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
109
110
111
112
113
114
115
116
117
118
119
120
const pokemonImgDisplay = document.getElementById("firstDisplay");
const pokemonNameDisplay = document.getElementById("nameDisplay");
const pokemonInfoDisplay = document.getElementById("secondDisplay");
const powerButton = document.getElementById("onOff");
function fetchPokemon() {
let id = document.getElementById("pokeSearch").value;
fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)
.then(response => response.json())
.then(data => {
createPokemon(data)
})
.catch(error => {
alert(`Ha ocurrido un error: ${error}`)
console.log(error);
});
}
let pokemonCard;
let statsCard;
function createPokemon(pokemon) {
if (!pokemonCard) { // Si el elemento no existe, crear uno nuevo
pokemonCard = document.createElement("div");
pokemonCard.classList.add("pokemon-block");
const sprite = document.createElement("img");
sprite.src = pokemon.sprites.other.dream_world.front_default;
pokemonNameDisplay.value = pokemon.name
//Información para mostrar en la segunda pantalla
statsCard = document.createElement("div");
statsCard.classList.add("details");
const statsTitle = document.createElement("p");
statsTitle.textContent = "Stats";
const healthContainer = document.createElement("div");
healthContainer.classList.add("details__stats");
healthContainer.classList.add("health");
const healthLabel = document.createElement("p");
healthLabel.textContent = "Health";
const health = document.createElement("p");
health.textContent = pokemon.stats[0].base_stat;
healthContainer.appendChild(healthLabel);
healthContainer.appendChild(health);
const attackContainer = document.createElement("div");
attackContainer.classList.add("details__stats");
attackContainer.classList.add("attack");
const attackLabel = document.createElement("p");
attackLabel.textContent = "Attack";
const attack = document.createElement("p");
attack.textContent = pokemon.stats[1].base_stat;
attackContainer.appendChild(attackLabel);
attackContainer.appendChild(attack);
const defenseContainer = document.createElement("div");
defenseContainer.classList.add("details__stats");
defenseContainer.classList.add("defense");
const defenseLabel = document.createElement("p");
defenseLabel.textContent = "Defense";
const defense = document.createElement("p");
defense.textContent = pokemon.stats[2].base_stat;
defenseContainer.appendChild(defenseLabel);
defenseContainer.appendChild(defense);
//Agregar elementos al div contenedor statsCard
statsCard.appendChild(statsTitle);
statsCard.appendChild(healthContainer);
statsCard.appendChild(attackContainer);
statsCard.appendChild(defenseContainer);
pokemonCard.appendChild(sprite);
pokemonImgDisplay.appendChild(pokemonCard);
pokemonInfoDisplay.appendChild(statsCard);
} else { // Si el elemento ya existe, actualizar sus valores
const sprite = pokemonCard.querySelector("img");
sprite.src = pokemon.sprites.other.dream_world.front_default;
pokemonNameDisplay.value = pokemon.name
const health = statsCard.querySelector(".health p:last-child");
health.textContent = pokemon.stats[0].base_stat;
const attack = statsCard.querySelector(".attack p:last-child");
attack.textContent = pokemon.stats[1].base_stat;
const defense = statsCard.querySelector(".defense p:last-child");
defense.textContent = pokemon.stats[2].base_stat;
}
}
function powerOn() {
powerButton.classList.toggle("button__on");
pokemonImgDisplay.classList.toggle("screen__on");
pokemonInfoDisplay.classList.toggle("screen__on");
let pokedexOn = pokemonImgDisplay.classList.contains("screen__on");
if (pokedexOn) {
document.getElementById("pokeSearch").removeAttribute("readonly");
} else if (!pokedexOn) {
document.getElementById("pokeSearch").setAttribute("readonly", "readonly");
document.getElementById("pokeSearch").value = "";
pokemonImgDisplay.removeChild(pokemonCard);
pokemonCard = null
pokemonInfoDisplay.removeChild(statsCard);
statsCard = null
pokemonNameDisplay.value = "";
}
}