<div class="container">
	<div class="row">
    <div class="col-md-12">
      <a href="https://axieinfinity.com/encyclopedia" target="_blank" >Check Axie Infinity Encyclopedia</a>
      
    </div>
    <hr>
		<div class="col-md-4">
			<div class="form-group">
			    <input type="text" class="form-control" id="axie_id" placeholder="axie_id # here">
			</div>
		</div>
		<div class="col-md-4">
			<a href="#" id="submit_btn" class="btn btn-primary">Calculate</a>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4">
			<table class="table">
				<tr>
			    	<th scope="row">ID</th>
			    	<td >#<span id="ax_id">-</span></td>
			    </tr>
			    <tr>
			    	<th scope="row">HP</th>
			    	<td id="hp">-</td>
			    </tr>
			    <tr>
					<th scope="row">Speed</th>
					<td id="speed">-</td>
			    </tr>
			    <tr>
					<th scope="row">Skill</th>
					<td id="skill">-</td>
			    </tr>
			    <tr>
					<th scope="row">Morale</th>
					<td id="morale">-</td>
			    </tr>
			</table>
		</div>
		<div class="col-md-4" id="image_container">
		</div>
	</div>
</div>
.container{
  margin-top:20px;
}
img{
  width:80%;
}
//[hp , speed, skill, morale]
//base stats
var base_stats = {
				"beast" : [31,35,31,43],
				"aquatic" : [39,39,35,27],
				"plant" : [43,31,31,35],
				"bird" : [27,43,35,35],
				"bug" : [35,31,35,39],
				"reptile" : [39,35,31,35]
				};
//var bonus stats
var bonus_stats_by_part = {
							"beast" : [0,1,0,3],
							"aquatic" : [1,3,0,0],
							"plant" : [3,0,0,1],
							"bird" : [0,3,0,1],
							"bug" : [1,0,0,3],
							"reptile" : [3,1,0,0]
							};
$("#submit_btn").click(function(e){
    var axie_id = $("#axie_id").val();
    if(!axie_id){
      alert("please enter id!");
    }
    axie_id = axie_id.replace("#", "");
    $("#ax_id").html("-");
    $("#hp").html("loading...");
    $("#speed").html("loading...");
    $("#skill").html("loading...");
    $("#morale").html("loading..");
    $("#image_container").html("");
    $.getJSON("https://axieinfinity.com/api/axies/"+axie_id)
      .done(function( json ) {
        var class_name = json.class;
        var total_stats = base_stats[class_name];
        json.parts.forEach(function(part,index){
            total_stats = total_stats.map(function (num, idx) {
              return num + bonus_stats_by_part[part.class][idx];
            }); 
        });
        $("#ax_id").html(axie_id);
        $("#hp").html(total_stats[0]);
        $("#speed").html(total_stats[1]);
        $("#skill").html(total_stats[2]);
        $("#morale").html(total_stats[3]);
        $("#image_container").html("<img src='"+json.figure.images[axie_id+".png"]+"' />");
      })
      .fail(function( jqxhr, textStatus, error ) {
        alert("failed please use correct ID! =) ");
    });
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js