JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="dataCtr" data-ip="">
    <button id="start" type="button">Start</button>
     <h3>FIPS - Countries</h3>

    <p>Based off of IP addresses from DL servers</p>
    <ul id="fipsList"></ul>
</div>
<div id="flag"></div>

CSS

body {
    font-size: 12px;
    color: #000;
    background-color: #FFF;
}
li {
    opacity: 0.5;
}
h3 {
    margin: 0;
}
#dataCtr {
    float: left;
    margin-right: 10px;
    border: 2px solid #666;
    padding: 5px;
    text-align: center;
}
#dataCtr ul {
    text-align: left;
}
#usOnly, #restOfTheWorld {
    border: 2px solid #007;
    padding: 10px;
    height: 200px;
    margin: 0 10px;
}
#usOnly img, #restOfTheWorld img {
    width: 50px;
    height: 50px;
}
#flag {
    border: 1px solid #000;
    width: 48px;
    height: 48px;
    float: left;
}

JavaScript

/******************************************************************************
    PROGRAM FLOW:
    
    JS finds element with data-ip attribute (served up by PHP)
    JS makes AJAX call with IP address and receives true/false from IP lookup
    JS then hide content based off class or id.
*****************************************************************************/

var FIPS = {
    US: {
        name: 'United States',
        sampleIp: '209.68.11.55',
        imageCoords: {
            x: '-440',
            y: '-150'
        }
    },
    JP: {
        name: 'Japan',
        sampleIp: '1.1.90.82',
        imageCoords: {
            x: '-490',
            y: '-52'
        }
    },
    GB: {
        name: 'Great Britain',
        sampleIp: '5.11.16.3',
        imageCoords: {
            x: '-343',
            y: '-150'
        }
    }
};


var testCountry = FIPS['JP'];

// this would be served up by PHP
$('#dataCtr').attr('data-ip', testCountry.sampleIp);

/*
$.each(FIPS, function (a, b) {
    $('#fipsList').append('<li class="fips"id="' + a + '">' + a + ' ' + b + '</li>');
});
*/
//alert('IP-based Geolocation Content Display\n\nPHP serves up visitor IP address.\n JS uses this to determine which elements will be shown/hidden.\n\nClick "Start" to simulate this. ')

$('#start').on('click', 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') {
               ...