JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<script src="http://jquery-plugins.net/jqIpLocation/jqIpLocation.js"></script>
 <div>IP Adress : <input id="txtIP" type="text" style="width:200px;font-size:12px;" value="173.194.36.50" />
    <input type="button" value=" Get Location " id="btnGetLocation" />
 </div>
<br/>
<div id="divIP"></div>

CSS

body
{
    padding: 20px;
    font-size: 12pt;
    font-family: calibri;
}

#divIP{ height:200px;}
.title {color:black;width:100px;}
.result {width:400px;color:#FF00FF;font-weight:bold;}

JavaScript

$(document).ready(function() {
    $('#btnGetLocation').click(function() {
        if ($('#txtIP').val() != "") {
            $('#divIP').empty().append('<div style="padding:3px;">Fetching Details....</div>');
            $.jqIpLocation({
                ip: $('#txtIP').val(),
                locationType: 'city',
                success: function(location) {
                    $('#divIP').empty();
                    $('#divIP').append('<div><span class="title">IP : </span><span class="result">' + location.ipAddress + '</span></div>');
                    $('#divIP').append('<div><span class="title">Country : </span><span class="result">' + location.countryName + '</span></div>');
                    $('#divIP').append('<div><span class="title">Country Code : </span><span class="result">' + location.countryCode + '</span></div>');
                    $('#divIP').append('<div><span class="title">City : </span><span class="result">' + location.cityName + '</span></div>');
                    $('#divIP').append('<div><span class="title">Region : </span><span class="result">' + location.cityName + '</span></div>');
                    $('#divIP').append('<div><span class="title">Latitude : </span><span class="result">' + location.latitude + '</span></div>');
                    $('#divIP').append('<div><span class="title">Longitude : </span><span class="result">' + location.longitude + '</span></div>');
                }
            });
        }
    });
});