JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<div id="ip">Loading...</div>
<div id="country_code"></div>
<div id="CA">Hello Canada</div>
<div id="US">Hello USA</div>
<div id="World">Hello World</div>
<div id="Europe">Hello World</div>

CSS

#US { text-align: left; color: blue; display:none;} 
#CA { text-align: left; color: blue; display:none;} 
#World { text-align: left; color: blue; display:none;} 
#Europe { text-align: left; color: blue; display:none;}

JavaScript

$.get("http://freegeoip.net/json/", function (response) {
		$("#ip").html("IP: " + response.ip);
		$("#country_code").html(response.country_code);
        var country = response.country_code;
        var europe = ['AL','AD','AT','BY','BE','BA','BG','HR','CY','CZ','DK','EE','FO','FI','FR','DE','GI','GR','HU','IS','IE','IT','LV','LI','LT','LU','MK','MT','MD','MC','NL','NO','PL','PT','RO','RU','SM','RS','SK','SI','ES','SE','CH','UA','VA','RS','IM','RS','ME'];
        if(country == 'US' || country == 'CA') document.getElementById(country).style.display = "block";
        else if (country === 'europe')    
document.getElementById('Europe').style.display = "block";
        else 
document.getElementById('World').style.display = "block";
	}, "jsonp");