JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    display: block;
    float: left;
    height: 100px;
    font-size:11px;
    border: 1px solid #000;
}

li a {
    display: block;
    width: 100px;
    height: 50px;
    float:left;
    margin: 10px;
}
li p {
    width: 75px;
    height: 100px;
    float: left;
    margin: 20px;
}

JavaScript

$(document).ready(function () {
    /* AJAX ERROR debugging setup */
    $.ajaxSetup({
        error: function (jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
    });
    $.ajax({
        type: "GET",
        url: 'http://dev.gpcontent.com/insite/eventAPI?cookieHash=ce380bd0-0e57-11e3-8863-a3dad23238a9',
        dataType: 'jsonp',

        success: function (data) {
            console.log('success!', data);
            var results = data[0];
            results = results.reverse();

            $('body').append('<ul id="pageList"></ul>')
            $.each(results, function (i) {
                $('#pageList').append('<li><a href="' + this['pageHref'] + '">' + this['pageTitle'] + '</a><p> - ' + this['timeStamp'] + '</p></li>');
            });
            $('li:odd').css('background-color','#f60')
        }
    });
});