creative-2/index.html at master · kierramarie/creative-2 · GitHub

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="creative2.css">
<script type="text/javascript"></script>
<title>Pokemon Generator</title>
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>

<script>
  var searchPoke = function() {
  var searchText = $("#searchSpot").val();
  var ranNum = Math.floor(Math.random()*(721-1+1)+1);
  var myurl= "https://pokeapi.co/api/v2/pokemon/" + ranNum + "/";
  console.log(myurl);
  $.ajax({
    url : myurl,
    dataType : "json",
    success : function(parsed_json) {
       console.log(parsed_json);
       everything = "<img src=\"" + parsed_json.sprites.front_default + "\" hspace=\"45%\">";
       everything += "<h2>" + parsed_json.name + "</h2>";
       everything += "<h3>Height: " + parsed_json.height + "</h3>";
       everything += "<h3>Weight: " + parsed_json.weight + "</h3>";
       everything += "<h3>Moves:</h3>";
       for (var i = 0; i < parsed_json.moves.length; i++)
       {
            var name = parsed_json.moves[i].move.name;
            everything += "<p>" + name + "</p>";
       }
       everything += "</ul>";
       $("#results").html(everything);
    }
  });
  }
</script>

</head>
<body>
<img src="poke.png" hspace="15%" height="75" width="70%">
<h1>Get A Random Pokemon!</h1>
<p></p>
<button id="searchButton" onclick="searchPoke()">Who's That Pokemon???</button>
<div id="results"></div>
</body>
</html>