-
Notifications
You must be signed in to change notification settings - Fork 0
/
PokeDextr1.html
336 lines (255 loc) · 10.2 KB
/
PokeDextr1.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<html>
<head>
<title> Poke Dextr </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* Style of the navigation bar */
.nav {
overflow: hidden;
background-color: white;
border-bottom: 5px solid black;
font-size: 20px;
padding-left: 120px;
}
/* Style of the links on the website */
a:link {
color: black;
text-decoration: none;
}
/* Style of the Poke Dextr text on the nav bar */
#Poke_Dextr {
padding-right: 800px;
font-size: 40px;
}
/* Style for box that holds all the pokemon names in a list */
#listing {
border: 3px solid black;
max-height: 600px;
max-width: 600px;
float: left;
overflow-y: scroll;
color: black;
display: block;
list-style-type: none;
padding: 20px;
padding-right: 80px;
}
/* Style for each pokemon's name in the list */
.collection-item {
float: left;
color: black;
font-size: 20px;
display: block;
list-style-type: none;
padding: 20px;
padding-left: 20px;
}
/* allows the cursor not to change to the text highlighter as we are choosing a pokemon*/
.collection-item:hover {
cursor: default;
}
/* Move the list object to the right */
#the_list {
padding-left: 120px;
}
/* Style of the display for the selected pokemon */
#display {
float: right;
border: 3px solid black;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 20px;
font-size: 18px;
}
/* Moves the entire display for pokemon data to the center */
#result {
padding-right: 420px;
padding-top: 20px;
}
</style>
</head>
<body onload="dugtrio()">
<!-- JAVASCRIPT FUNCTIONS BEGINS HERE -->
<script>
function dugtrio(){
var display = document.querySelector('#result');
// displays dugtrio link when page is loaded
display.innerHTML = `
<div id="display">
<a id="dugtrio" onclick="getDugtrio('dugtrio')">dugtrio</a>
</div>
`
}
</script>
<script>
// Dedicated Dugtrio Function so the test will work :)
async function getDugtrio(pokemonName){
var URL = "https://pokeapi.co/api/v2/pokemon/dugtrio";
class pokemon {
constructor(name, image_url, type, height, weight, number) {
this.name = name;
this.image_url = image_url;
this.type = type;
this.height = height;
this.weight = weight;
this.number = number;
}
}
// Variables for the pokemon
var pkmn_name = "";
var pkmn_type = "";
var pkmn_img_url = "";
var pkmn_height = "";
var pkmn_weight = "";
var pkmn_number = 0;
var pokemon_data;
// fetch dugtrio's data from the api link
try {
let response = await fetch(URL);
let api_data = await response.json(); // stores data from the api into a var
pokemon_data = api_data;
} catch (error) {
console.log(error);
}
// extract dugtrio's data
pkmn_name = pokemonName;
pkmn_img_url = pokemon_data.sprites.front_default;
pkmn_height = pokemon_data.height;
pkmn_weight = pokemon_data.weight;
pkmn_number = pokemon_data.id;
// create an object with dugtrio's data
var Dugtrio_Pokemon = new pokemon(pkmn_name, pkmn_img_url, pkmn_type, pkmn_height, pkmn_weight, pkmn_number);
displayPokemon(Dugtrio_Pokemon); // send the data to the function to render it on the page
}
</script>
<script>
async function getPokemon(pokemonName) {
var main_api_url = "https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50";
var url_for_this_pokemon = "";
var pokemon_array = []; // stores the pokemon and their url
var pkmn_type_array = []; // stores the types of the pokemon
// structure of a pokemon
class pokemon {
constructor(name, image_url, type, height, weight, number) {
this.name = name;
this.image_url = image_url;
this.type = type;
this.height = height;
this.weight = weight;
this.number = number;
}
}
// Variables for the pokemon
var pkmn_name = "";
var pkmn_type = "";
var pkmn_img_url = "";
var pkmn_height = "";
var pkmn_weight = "";
var pkmn_number = 0;
// go to the main API and find the url for the pokemon and extract that data
try {
let response = await fetch(main_api_url);
let api_data = await response.json(); // stores data from the api into a var
pokemon_array = api_data.results; // store the array of pokemon names and urls from the object
}
catch (error) {
console.log(error);
}
// search the extracted array for the name of the pokemon to get the url with the data
for (let data in pokemon_array) {
if (pokemon_array[data].name == pokemonName) {
url_for_this_pokemon = pokemon_array[data].url;
}
}
// take the url and fetches the data from the api
try {
let response_2 = await fetch(url_for_this_pokemon);
let pokemon_data = await response_2.json(); // stores data from the api into a var
var data_counter_1 = 0;
pkmn_name = pokemonName;
pkmn_img_url = pokemon_data.sprites.front_default;
pkmn_height = pokemon_data.height;
pkmn_weight = pokemon_data.weight;
pkmn_number = pokemon_data.id;
pkmn_type = pokemon_type = pokemon_data.types[0].type.name;
data_counter_1 = 0;
} catch (error) {
console.log(error);
}
// make a new pokemon object from the class to combine all these fields as one object to send to the function for displaying
var Query_Pokemon = new pokemon(pkmn_name, pkmn_img_url, pkmn_type, pkmn_height, pkmn_weight, pkmn_number);
displayPokemon(Query_Pokemon);
//given a pokemon name performs an ajax requests querying the pokemon's data and pass it to displayPokemon()
}
</script>
<script>
getListing("https://pokeapi.co/api/v2/pokemon/?limit=50&offset=50"); // the url for the function to go to to access the API
async function getListing(url) {
try {
let response = await fetch(url);
let api_data = await response.json(); // stores data from the api into a var
// extract the pokemon names array from within the object
var pokemon_names = []; // array to hold all the pokemon names & urls
pokemon_names = api_data.results;
displayListing(pokemon_names); // sends the var to the next function to display the pokemon's names
}
catch (error) {
console.log(error);
}
//performs an ajax request to the spcified url to get pokemon data then pass it to displayListing()
}
</script>
<script>
function displayListing(pokeList) {
var list = document.querySelector('#listing');
for (let pokemon in pokeList) {
// displays all pokemon by name on the webpage
list.innerHTML += `
<li>
<a class="collection-item" onclick="getPokemon('${pokeList[pokemon].name}')">
${pokeList[pokemon].name}
</a>
</li>
`
}
//Renders a list of pokemon links to the page
}
</script>
<script>
function displayPokemon(pokemon) {
var display = document.querySelector('#result');
// Displays all the pokemon's data in the webpage
display.innerHTML = `
<div id="display">
<img src="${pokemon.image_url}" height="300" alt="${pokemon.name}"/>
<p> ${pokemon.name} #${pokemon.number}</p>
<p> Type1: ${pokemon.type}</p>
<p> Weight: ${pokemon.weight}</p>
<p> Height: ${pokemon.height}</p>
</div>
`
//renders details of the specified pokemon onto the page
}
</script>
<!-- HTML CODE BEGINS HERE -->
<!-- NAVIGATION BAR -->
<nav class="nav">
<a href="index.html" id="Poke_Dextr"> Poke Dextr </a>
<a href="index.html"> Listing </a>
</nav>
<!-- MAIN DIV -->
<main class="main" id="main-content">
<div id="the_list">
<ul id="listing" onload="getListing()">
<!-- UL to be filled with pokemon names from the function in the form of LI's with A Tags -->
</ul>
</div>
<!-- DIV FOR POKEMON DISPLAY -->
<div id="result">
<!-- DIV to be filled with pokemon data from the function -->
</div>
</main>
</body>
</html>