JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" id="aIP">IP Geolocation</a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <div class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" id="txtIP" class="form-control" placeholder="">
            </div>
            <button id="btnIP" class="btn btn-default">Ping</button>
          </div>
        </div>
      </div>
    </nav>
  </div>  
  <div class="container-fluid" id="resultsContainer">
    <div class="panel panel-default">
      <div class="panel-heading">Results</div>
      <div class="panel-body" id="resultsPanel"></div>
    </div>
  </div>

CSS

#resultsContainer { display: none; }

JavaScript

(function($) {
  
  var props = [
    { name: "ip", description: "(Visitor IP address, or IP address specified as parameter)" },
    { name: "country_code", description: "(Two-letter ISO 3166-1 alpha-2 country code)" },
    { name: "country_code3", description: "(Three-letter ISO 3166-1 alpha-3 country code)" },
    { name: "country", description: "(Name of the country)" },
    { name: "region_code", description: "(Two-letter ISO-3166-2 state / region code)" },
    { name: "region", description: "(Name of the region)" },
    { name: "city", description: "(Name of the city)" },
    { name: "postal_code", description: "(Postal code / Zip code)" },
    { name: "continent_code", description: "(Two-letter continent code)" },
    { name: "latitude", description: "(Latitude)" },
    { name: "longitude", description: "(Longitude)" },
    { name: "dma_code", description: "(DMA Code)" },
    { name: "area_code", description: "(Area Code)" },
    { name: "asn", description: "(Autonomous System Number)" },
    { name: "isp", description: "(Internet service provider)" },
    { name: "timezone", description: "(Time Zone)" }
  ];
  
  var validateIP = function(ip) {  
    if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(myForm.emailAddr.value)) {  
      return (true);  
    }  
    return (false);
};  
  
  var getIP = function(ip) {
    var rCon = $("#resultsContainer");
    rCon.hide(200);
    var url = "";
    if(ip) {
      url = "http://www.telize.com/geoip/" + ip;
    }else{
      url = "http://www.telize.com/geoip";
    }
    $.get(url, function(data) {  
      var panel = $("#resultsPanel");
      $.each(props, function(k, prop) {
        var head = $("<div>").addClass("panel-heading").append(prop.name.toUpperCase() + " (" + prop.description + ")");
        var body = $("<div>").addClass("panel-body").append(data[prop.name]);
       ...