JSFiddle - React, Tailwind, and code Playground

by djoice

HTML

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

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

CSS

#online_player{
    font-size:22px;
}

#load_bar{
    width:300px;
    height:30px;
    background-color: #eee;
    border:#ccc 1px solid;
    margin-top:25px;
}
#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;
}

JavaScript

$(document).ready(function(){

    //URL адрес вашего API    
    var APIurl = 'http://minecraft-servers.com.ua/server/89.169.92.204_25565/json/';
    
    //берем данные с minecraft-servers.com.ua
    $.getJSON(APIurl,function(data){
        //все хорошо - выводим данные
        if(data.status_query=='ok'){
        //название сервера
        $("#sname").text(data.info.name);
            
        //сейчас играют \ максимум
        $("#online_player").html(data.info.players+'/'+data.info.max_players);
        //бар , загрузка в %
            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+')');
        
    });

    
});