JSFiddle - React, Tailwind, and code Playground

by djoice

HTML

<h1 id="sname"></h1>

<h3>Онлайн</h3>
<div id="online_player"></div>
<h3>Версия и ПО</h3>
<div id="version"></div>
<h3>Бар</h3>
<div id="load_bar">
    <div id="load"></div>
</div>
<h3>Рейтинг и его изменения</h3>
<div id="rate"></div>

<h3>Список игроков</h3>
<div id="players_list"></div>

CSS

#online_player{
    font-size:22px;
}

#load_bar{
    width:300px;
    height:30px;
    background-color: #eee;
    border:#ccc 1px solid;
    margin-top:25px;
    border-radius:5px;
}
#load{
    width:0;
    background-color: #ccc;
    color:#111;
    height:30px;
    text-align:center;
    font-size:18px;
    line-height:30px;
}

#rate{
    margin-top:25px;
    font-size:22px;
    color:#4679BD;
}
small{
    font-size:10px;
    color:#aeaeae;
}

JavaScript

$(document).ready(function(){

    //URL адрес вашего API    
    var APIurl = 'http://minecraft-statistic.net/server/188.165.136.97_25794/json/';
    
    //берем данные с minecraft-statistic.net
    $.getJSON(APIurl,function(data){
        //все хорошо - выводим данные
        if(data.status_query=='ok'){
        //название сервера
        $("#sname").text(data.info.name);
            
        //сейчас играют \ максимум
        $("#online_player").html(data.info.players+'/'+data.info.max_players);
        
        //версия и ПО
        $("#version").html(data.info.version+' <small>'+data.info.software + '</small>');
            
        //бар , загрузка в %
            var load = (data.info.players/data.info.max_players*100).toFixed(2);
            $("#load").html(data.info.players+'('+load+'%)').css({'width':load+'%'});

        }
        //рейтинг + его изменения
        $("#rate").html(data.rating.main + ' ('+data.rating.difference+')');
        
        //список игроков
        for (var i = 0; i < data.info.players_list.length; i++) {
            console.log(data.info.players_list[i]);
            
           $("#players_list").append('<a href="http://minecraft-statistic.net/player/'+data.info.players_list[i]+'.html">'+data.info.players_list[i]+'</a> ');
        }
        
    });

    
});