<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! =) ");
    });
});