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="usOnly" style="float: left;">
     <h3>US Content</h3>

    <div class="womanBlock">
        <a class="woLink" target="_blank" href="http://dsbs.sba.gov/dsbs/search/dsp_profile.cfm?duns=052218609">
            <img alt="Graphic Products is a Woman-Owned Small Business." src="http://graphic.pairserver.com/global/images/main/footer-woman-owned.png"></img><span class="womanOwned">
      Woman-Owned 
    <br></br>
      Small Business.
    </span></a>
        <a class="hero" href="http://www.graphicproducts.com/careers/index.php"><img alt="" src="//graphic.pairserver.com/global/images/main/hiring-hero.png"></img></a>
    </div>
</div>
<div id="restOfTheWorld" style="float: left;">
    
<h3>Non-US Content</h3>

    <img src="http://www.irise.com/blog/wp-content/uploads/2013/03/pic-equest-global.jpg" />
</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;
}

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': 'United States', //209.68.11.55
    'JP': 'Japan', //1.1.90.82
    'GB': 'Great Britain', //5.11.16.3
    'UC': 'Curaçao',
        'UG': 'Uganda',
        'UK': 'United Kingdom',
        'UP': 'Ukraine',
        'US': 'United States',
        'UV': 'Burkina Faso',
        'UY': 'Uruguay',
        'UZ': 'Uzbekistan'
};
var ips = [
    '209.68.11.55', /* US */
    '1.1.90.82', /* Japan */
    '5.11.16.3' /* Great Britain */ ];

var testIp = ips[2];

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

/*
$.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') {
                alert('Ajax request aborted.');
            } else {
      ...