├── .vscode
└── settings.json
├── assets
├── back-to-home.svg
├── chevron_left.svg
├── chevron_right.svg
├── cross.svg
├── height.svg
├── pokeball.svg
├── pokedex.svg
├── search.svg
├── sorting.svg
└── weight.svg
├── detail.html
├── index.html
├── pokemon-detail.js
├── pokemon.js
├── search.js
└── style.css
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
4 |
--------------------------------------------------------------------------------
/assets/back-to-home.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/assets/chevron_left.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/chevron_right.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/cross.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/height.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/pokeball.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/pokedex.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/assets/search.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/sorting.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/assets/weight.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/detail.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Pokemon Detail
7 |
8 |
9 |
10 |
11 |
12 |
32 |
43 |
44 |
48 |
About
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Weight
56 |
57 |
58 |
59 |
60 |
61 |
62 |
Height
63 |
64 |
68 |
69 |
70 |
Base Stats
71 |
93 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
71 |
72 |
75 | Pokemon not found
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/pokemon-detail.js:
--------------------------------------------------------------------------------
1 | let currentPokemonId = null;
2 |
3 | document.addEventListener("DOMContentLoaded", () => {
4 | const MAX_POKEMONS = 151;
5 | const pokemonID = new URLSearchParams(window.location.search).get("id");
6 | const id = parseInt(pokemonID, 10);
7 |
8 | if (id < 1 || id > MAX_POKEMONS) {
9 | return (window.location.href = "./index.html");
10 | }
11 |
12 | currentPokemonId = id;
13 | loadPokemon(id);
14 | });
15 |
16 | async function loadPokemon(id) {
17 | try {
18 | const [pokemon, pokemonSpecies] = await Promise.all([
19 | fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
20 | res.json()
21 | ),
22 | fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
23 | res.json()
24 | ),
25 | ]);
26 |
27 | const abilitiesWrapper = document.querySelector(
28 | ".pokemon-detail-wrap .pokemon-detail.move"
29 | );
30 | abilitiesWrapper.innerHTML = "";
31 |
32 | if (currentPokemonId === id) {
33 | displayPokemonDetails(pokemon);
34 | const flavorText = getEnglishFlavorText(pokemonSpecies);
35 | document.querySelector(".body3-fonts.pokemon-description").textContent =
36 | flavorText;
37 |
38 | const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) =>
39 | document.querySelector(sel)
40 | );
41 | leftArrow.removeEventListener("click", navigatePokemon);
42 | rightArrow.removeEventListener("click", navigatePokemon);
43 |
44 | if (id !== 1) {
45 | leftArrow.addEventListener("click", () => {
46 | navigatePokemon(id - 1);
47 | });
48 | }
49 | if (id !== 151) {
50 | rightArrow.addEventListener("click", () => {
51 | navigatePokemon(id + 1);
52 | });
53 | }
54 |
55 | window.history.pushState({}, "", `./detail.html?id=${id}`);
56 | }
57 |
58 | return true;
59 | } catch (error) {
60 | console.error("An error occured while fetching Pokemon data:", error);
61 | return false;
62 | }
63 | }
64 |
65 | async function navigatePokemon(id) {
66 | currentPokemonId = id;
67 | await loadPokemon(id);
68 | }
69 |
70 | const typeColors = {
71 | normal: "#A8A878",
72 | fire: "#F08030",
73 | water: "#6890F0",
74 | electric: "#F8D030",
75 | grass: "#78C850",
76 | ice: "#98D8D8",
77 | fighting: "#C03028",
78 | poison: "#A040A0",
79 | ground: "#E0C068",
80 | flying: "#A890F0",
81 | psychic: "#F85888",
82 | bug: "#A8B820",
83 | rock: "#B8A038",
84 | ghost: "#705898",
85 | dragon: "#7038F8",
86 | dark: "#705848",
87 | steel: "#B8B8D0",
88 | dark: "#EE99AC",
89 | };
90 |
91 | function setElementStyles(elements, cssProperty, value) {
92 | elements.forEach((element) => {
93 | element.style[cssProperty] = value;
94 | });
95 | }
96 |
97 | function rgbaFromHex(hexColor) {
98 | return [
99 | parseInt(hexColor.slice(1, 3), 16),
100 | parseInt(hexColor.slice(3, 5), 16),
101 | parseInt(hexColor.slice(5, 7), 16),
102 | ].join(", ");
103 | }
104 |
105 | function setTypeBackgroundColor(pokemon) {
106 | const mainType = pokemon.types[0].type.name;
107 | const color = typeColors[mainType];
108 |
109 | if (!color) {
110 | console.warn(`Color not defined for type: ${mainType}`);
111 | return;
112 | }
113 |
114 | const detailMainElement = document.querySelector(".detail-main");
115 | setElementStyles([detailMainElement], "backgroundColor", color);
116 | setElementStyles([detailMainElement], "borderColor", color);
117 |
118 | setElementStyles(
119 | document.querySelectorAll(".power-wrapper > p"),
120 | "backgroundColor",
121 | color
122 | );
123 |
124 | setElementStyles(
125 | document.querySelectorAll(".stats-wrap p.stats"),
126 | "color",
127 | color
128 | );
129 |
130 | setElementStyles(
131 | document.querySelectorAll(".stats-wrap .progress-bar"),
132 | "color",
133 | color
134 | );
135 |
136 | const rgbaColor = rgbaFromHex(color);
137 | const styleTag = document.createElement("style");
138 | styleTag.innerHTML = `
139 | .stats-wrap .progress-bar::-webkit-progress-bar {
140 | background-color: rgba(${rgbaColor}, 0.5);
141 | }
142 | .stats-wrap .progress-bar::-webkit-progress-value {
143 | background-color: ${color};
144 | }
145 | `;
146 | document.head.appendChild(styleTag);
147 | }
148 |
149 | function capitalizeFirstLetter(string) {
150 | return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
151 | }
152 |
153 | function createAndAppendElement(parent, tag, options = {}) {
154 | const element = document.createElement(tag);
155 | Object.keys(options).forEach((key) => {
156 | element[key] = options[key];
157 | });
158 | parent.appendChild(element);
159 | return element;
160 | }
161 |
162 | function displayPokemonDetails(pokemon) {
163 | const { name, id, types, weight, height, abilities, stats } = pokemon;
164 | const capitalizePokemonName = capitalizeFirstLetter(name);
165 |
166 | document.querySelector("title").textContent = capitalizePokemonName;
167 |
168 | const detailMainElement = document.querySelector(".detail-main");
169 | detailMainElement.classList.add(name.toLowerCase());
170 |
171 | document.querySelector(".name-wrap .name").textContent =
172 | capitalizePokemonName;
173 |
174 | document.querySelector(
175 | ".pokemon-id-wrap .body2-fonts"
176 | ).textContent = `#${String(id).padStart(3, "0")}`;
177 |
178 | const imageElement = document.querySelector(".detail-img-wrapper img");
179 | imageElement.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${id}.svg`;
180 | imageElement.alt = name;
181 |
182 | const typeWrapper = document.querySelector(".power-wrapper");
183 | typeWrapper.innerHTML = "";
184 | types.forEach(({ type }) => {
185 | createAndAppendElement(typeWrapper, "p", {
186 | className: `body3-fonts type ${type.name}`,
187 | textContent: type.name,
188 | });
189 | });
190 |
191 | document.querySelector(
192 | ".pokemon-detail-wrap .pokemon-detail p.body3-fonts.weight"
193 | ).textContent = `${weight / 10}kg`;
194 | document.querySelector(
195 | ".pokemon-detail-wrap .pokemon-detail p.body3-fonts.height"
196 | ).textContent = `${height / 10}m`;
197 |
198 | const abilitiesWrapper = document.querySelector(
199 | ".pokemon-detail-wrap .pokemon-detail.move"
200 | );
201 | abilities.forEach(({ ability }) => {
202 | createAndAppendElement(abilitiesWrapper, "p", {
203 | className: "body3-fonts",
204 | textContent: ability.name,
205 | });
206 | });
207 |
208 | const statsWrapper = document.querySelector(".stats-wrapper");
209 | statsWrapper.innerHTML = "";
210 |
211 | const statNameMapping = {
212 | hp: "HP",
213 | attack: "ATK",
214 | defense: "DEF",
215 | "special-attack": "SATK",
216 | "special-defense": "SDEF",
217 | speed: "SPD",
218 | };
219 |
220 | stats.forEach(({ stat, base_stat }) => {
221 | const statDiv = document.createElement("div");
222 | statDiv.className = "stats-wrap";
223 | statsWrapper.appendChild(statDiv);
224 |
225 | createAndAppendElement(statDiv, "p", {
226 | className: "body3-fonts stats",
227 | textContent: statNameMapping[stat.name],
228 | });
229 |
230 | createAndAppendElement(statDiv, "p", {
231 | className: "body3-fonts",
232 | textContent: String(base_stat).padStart(3, "0"),
233 | });
234 |
235 | createAndAppendElement(statDiv, "progress", {
236 | className: "progress-bar",
237 | value: base_stat,
238 | max: 100,
239 | });
240 | });
241 |
242 | setTypeBackgroundColor(pokemon);
243 | }
244 |
245 | function getEnglishFlavorText(pokemonSpecies) {
246 | for (let entry of pokemonSpecies.flavor_text_entries) {
247 | if (entry.language.name === "en") {
248 | let flavor = entry.flavor_text.replace(/\f/g, " ");
249 | return flavor;
250 | }
251 | }
252 | return "";
253 | }
254 |
--------------------------------------------------------------------------------
/pokemon.js:
--------------------------------------------------------------------------------
1 | const MAX_POKEMON = 151;
2 | const listWrapper = document.querySelector(".list-wrapper");
3 | const searchInput = document.querySelector("#search-input");
4 | const numberFilter = document.querySelector("#number");
5 | const nameFilter = document.querySelector("#name");
6 | const notFoundMessage = document.querySelector("#not-found-message");
7 |
8 | let allPokemons = [];
9 |
10 | fetch(`https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMON}`)
11 | .then((response) => response.json())
12 | .then((data) => {
13 | allPokemons = data.results;
14 | displayPokemons(allPokemons);
15 | });
16 |
17 | async function fetchPokemonDataBeforeRedirect(id) {
18 | try {
19 | const [pokemon, pokemonSpecies] = await Promise.all([
20 | fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) =>
21 | res.json()
22 | ),
23 | fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) =>
24 | res.json()
25 | ),
26 | ]);
27 | return true;
28 | } catch (error) {
29 | console.error("Failed to fetch Pokemon data before redirect");
30 | }
31 | }
32 |
33 | function displayPokemons(pokemon) {
34 | listWrapper.innerHTML = "";
35 |
36 | pokemon.forEach((pokemon) => {
37 | const pokemonID = pokemon.url.split("/")[6];
38 | const listItem = document.createElement("div");
39 | listItem.className = "list-item";
40 | listItem.innerHTML = `
41 |
44 |
45 |
46 |
48 |
#${pokemon.name}
49 |
22 |
23 | 
35 | 
41 | 
17 | 
26 |
32 | 
38 | 
47 |