-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
114 lines (98 loc) · 2.68 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
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
("use strict");
const typeColor = {
bug: "#26de81",
dragon: "#ffeaa7",
electric: "#fed330",
fairy: "#FF0069",
fighting: "#30336b",
fire: "#f0932b",
flying: "#81ecec",
grass: "#00b894",
ground: "#EFB549",
ghost: "#a55eea",
ice: "#74b9ff",
normal: "#95afc0",
poison: "#6c5ce7",
psychic: "#a29bfe",
rock: "#2d3436",
water: "#0190FF",
};
const URL = `https://pokeapi.co/api/v2/pokemon/`;
const card = document.getElementById("card");
const btn = document.getElementById("btn");
/**
* Fetch Pokemon Data
*/
const getData = async () => {
// Generate Random Number between 1 and 150
let id = Math.floor(Math.random() * 150) + 1;
// Combine Pokeapi url with pokemon id
const finalURL = URL + id;
try {
const response = await fetch(finalURL);
const data = await response.json();
// Generate Card
generateCard(data);
} catch (error) {
console.error("Error in fetching Pokemon", error);
}
};
/**
* @param {JSON} data Pokemon Data
*/
const generateCard = (data) => {
// Required Data
const hp = data.stats[0].base_stat;
const statAttack = data.stats[1].base_stat;
const statDefense = data.stats[2].base_stat;
const statSpeed = data.stats[5].base_stat;
const imageSrc = data.sprites.other.dream_world.front_default;
const pokemonName = data.name[0].toUpperCase() + data.name.slice(1);
// Set Theme Color based on pokemon type
const themeColor = typeColor[data.types[0].type.name];
card.innerHTML = `
<p class="hp">
<span>HP</span>
${hp}
</p>
<img src=${imageSrc} />
<h2 class="poke-name">${pokemonName}</h2>
<div class="types">
</div>
<div class="stats">
<div>
<h3>${statAttack}</h3>
<p>Attack</p>
</div>
<div>
<h3>${statDefense}</h3>
<p>Defense</p>
</div>
<div>
<h3>${statSpeed}</h3>
<p>Speed</p>
</div>
</div>
`;
appendTypes(data.types); // Call Type Tags
styleCard(themeColor); // Call StyleCard
};
const appendTypes = (types) => {
types.forEach((item) => {
let span = document.createElement("span");
span.textContent = item.type.name;
document.querySelector(".types").appendChild(span);
});
};
/**
* @param {Hexcode} color Color Hex code based on type of pokemon
*/
const styleCard = (color) => {
card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`;
card.querySelectorAll(".types span").forEach((typeColor) => {
typeColor.style.background = color;
});
};
// EventListeners
btn.addEventListener("click", getData);
window.addEventListener("load", getData);