JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<script src="http://jquery-plugins.net/jqIpLocation/jqIpLocation.js"></script>
 <h1>jqIpLocation  jQuery IP Location Plugin Demo</h1>
<div style="padding:0px 0 5px 0">
    <div class="clearfix"></div>
</div>
<br />
<div>
<div style="float:left; width:70%">
 <div><span style="font-size:20px">IP Adress : </span> <input id="txtIP" type="text" value="213.243.4.20" class="txt" />
	<input id="btnGetLocation" type="button" value="Get Location" class="btn btn-primary" />
 </div>
<br/>
<div id="divIP"></div>
</div>

CSS

body{background-color:#F4F4EE; font:17px tahoma,Geneva,sans-serif; }
h1 {color: #505050; font-size:2.2em;  margin: 0;  padding: 15px 0;  text-shadow: 1px 1px 0 #FFFFFF;}
#divIP{ height:200px;}
.title {color:#777777; width:30%;}
.result {color:#2786C2}
input[type="text"], .txt {font-size:20px; height:30px; padding:4px;}
input[type="button"] {margin-top:-8px;}
table{width:80% !important;}

JavaScript

$.getJSON("http://jsonip.appspot.com?callback=?",
    function(data){
       alert( "Your ip: " + data.ip);
        $('#txtIP').val(data.ip);
        $('#btnGetLocation').click()
  });
$("#btnGetLocation").live("click", function () {

    if ($('#txtIP').val() != "") {
        $('#divIP').empty().append('<div style="padding:5px;"><img src="loader.gif" /></div>');

        $.jqIpLocation({
            ip: $('#txtIP').val(),
            locationType: 'city',
            success: function (location) {
                $('#divIP').empty();
                $('#divIP').append('<table class="table table-bordered table-striped">'
                + '<tr><td class="title">IP</td><td class="result">' + location.ipAddress + '</td></tr>'
                + '<tr><td class="title">Country</td><td class="result">' + location.countryName + '</td></tr>'
                + '<tr><td class="title">Country Code</td><td class="result">' + location.countryCode + '</td></tr>'
                + '<tr><td class="title">City</td><td class="result">' + location.cityName + '</td></tr>'
                + '<tr><td class="title">Region</td><td class="result">' + location.cityName + '</td></tr>'
                + '<tr><td class="title">Latitude</td><td class="result">' + location.latitude + '</td></tr>'
                + '<tr><td class="title">Longitude</td><td class="result">' + location.longitude + '</td></tr>'
                + '</table>');
            }
        });
    }

 });