JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<span class="number-count" id="api_calls_count"><span class="number">0</span>  , <span class="number">0</span> <span class="number">0</span> <span class="number">0</span>  , <span class="number">0</span> <span class="number">0</span> <span class="number">0</span>  , <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> </span>

CSS

.number-count {
font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
border-radius: 3px;
background: #f7f7f7;
padding: 5px;
margin: 0 5px;
font-size: 22px;
display: inline-block;
text-align: center;
}
.number {
border-radius: 3px;
display: inline-block;
border: 1px solid #DDD;
background: #FFF;
padding: 0 5px;
line-height: 30px;
}

JavaScript

var $api_calls_count = $('#api_calls_count');
$.get('http://sepconnect.info/dev/etc/test_remote_placements.php?' + new Date().getTime(), number_callback, 'json');

function number_callback(data) {
    var $api_calls_count = $('#api_calls_count');
        var calls = '' + data.api_calls;
        var html = '';
        for (var i = 0; i < calls.length; ++i) {
          if (i > 0 && (calls.length - i) % 3 === 0) {
            html += ' , '
          }
          html += '<span class="number">' + calls[i] + '</span> ';
        }
        $api_calls_count.html(html);
}
/*
var $api_calls_count = $('#api_calls_count');
    $.timer(function() {
        $.get('http://sepconnect.info/dev/etc/test_remote_placements.php?' + new Date().getTime(), function(data) {
        var calls = '' + data.api_calls;
        var html = '';
        for (var i = 0; i < calls.length; ++i) {
          if (i > 0 && (calls.length - i) % 3 === 0) {
            html += ' , '
          }
          html += '<span class="number">' + calls[i] + '</span> ';
        }
        $api_calls_count.html(html);
      }, 'json');
    }, 1000, true);
*/