JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

Enter IP : <input type='text' name='ip' id='ip' value="207.243.116.241" />
  <input id="findme" type='button' value='Track' />
  
  <ul id='output'>
  </ul>

JavaScript

$('#findme').on('click', function(e) {
  e.preventDefault();
	getIpDetail();
});
   
  function getIpDetail(){
   var ip = $('#ip').val();
   $.get(
    'https://ipinfodb.com/ip_query.php?ip='+$('#ip').val(),
    function(result) {
     $('#output').html('');
     $('#ip').val('');
     $('#output').append('<li>Ip Address : '+$(result).find('Ip').text()+'</li>');
     $('#output').append('<li>City : '+$(result).find('City').text()+'</li>');
     $('#output').append('<li>State/Province : '+$(result).find('RegionName').text()+'</li>');
     $('#output').append('<li>Country : '+$(result).find('CountryName').text()+'</li>');
     $('#output').append('<li>Zip or postal code : '+$(result).find('ZipPostalCode').text()+'</li>');
     $('#output').append('<li>Latitude : '+$(result).find('Latitude').text()+'</li>');
     $('#output').append('<li>Longitude : '+$(result).find('Longitude').text()+'</li>');
     $('#output').append('<li>Timezone : '+$(result).find('Timezone').text()+'</li>');
     $('#output').append('<li>Gmtoffset : '+$(result).find('Gmtoffset').text()+'</li>');
     $('#output').append('<li>Dstoffset : '+$(result).find('Dstoffset').text()+'</li>');
    },'xml'
   );
  }