JSFiddle - React, Tailwind, and code Playground

by Sameer Shemna

HTML

<div id="main"></div>

JavaScript

$(document).ready(function(){
        callAjax();
});
    var url = "https://www.toontownrewritten.com/api/invasions";
       function callAjax(){$('#main').fadeOut();
                           $('#main').html("<h1 style='text-align:center;margin:auto;font-size:16px;text-decoration:underline;'>Invasion Tracker</h2><br style='font-size:1px;'>");
            $.get(url,{},function(data){
                if(typeof data.invasions != 'undefined'){
        for(var index in data.invasions){
            var value = data.invasions[index];
                 
                  $('#main').append("<h3 style='text-align:center;margin:auto;'><b>District:</b> "+index+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> "+value.type+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> "+value.progress+"</h3><br style='font-size:2px;'>");
             }    

            }else{
                  $('#main').append("<h3 style='text-align:center;margin:auto;'>No data found</h3>");
                  }
                $('#main').fadeIn();                        
                setTimeout(callAjax,10100); 
                });
                           
}