-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpokedex.html
77 lines (62 loc) · 1.48 KB
/
pokedex.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pokedex</title>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script>
$(document).ready(function() {
for (var i = 1; i < 152; i++) {
var poke = $('<img src=http://pokeapi.co/media/img/' + i + '.png id=' + i + '>');
$('#pokemons').append(poke);
}
$('img').click(function() {
var myid = $(this).attr('id');
var address = 'http://pokeapi.co/api/v1/pokemon/' + myid;
$.get(address, function (data) {
console.log(data, 'id');
console.log(data.types[0].name);
var html_str='';
html_str += '<h1>'+ data.name +'<\/h1>';
html_str += '<img src=http://pokeapi.co/media/img/' + myid + '.png>';
html_str += '<h4> Types <\/h4>';
html_str += '<ul>';
for (var i=0; i< data.types.length; i++) {
html_str += '<li>' + data.types[i].name + '<\/li>'; }
html_str += '<\/ul>';
html_str += '<h4> Heigth <\/h4>' + data.height;
html_str += '<h4> Weigth <\/h4>' + data.weight;
$('#redbox').html(html_str);
});
});
}, 'json');
</script>
<style>
#pokemons {
display: inline-block;
width: 850px;
height: 1200px;
}
#redbox {
display: inline-block;
border: 3px solid red;
width: 200px;
height: 500px;
vertical-align: top;
padding: 10px;
}
#redbox h1 {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id= 'wrapper'>
<div id='pokemons'>
</div>
<div id='redbox'>
</div>
</div>
</body>
</html>