IP Address Lookup

Geolocation data is provided by ipapi.co. Results are approximate and may not reflect exact physical locations.

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

// ── Helpers ────────────────────────────────────────────────
  function countryCodeToFlag(cc) {
    if (!cc || cc.length !== 2) return '';
    return [...cc.toUpperCase()].map(c => String.fromCodePoint(0x1F1E0 + c.charCodeAt(0) - 65)).join('');
  }

  function isValidIP(str) {
    const ipv4 = /^(\d{1,3}\.){3}\d{1,3}$/;
    const ipv6  = /^[\da-fA-F:]{2,39}$/;
    return ipv4.test(str) || ipv6.test(str);
  }

  function buildGeoGrid(container, data) {
    container.innerHTML = '';

    const rows = [
      {
        label: 'Country',
        value: data.country_name
          ? `<span class="flag">${countryCodeToFlag(data.country_code)}</span>${data.country_name} (${data.country_code || ''})`
          : '—'
      },
      {
        label: 'City / Region',
        value: [data.city, data.region].filter(Boolean).join(', ') || '—'
      },
      {
        label: 'ISP / Organization',
        value: data.org || data.asn || '—'
      },
      {
        label: 'Timezone',
        value: data.timezone || '—'
      },
      {
        label: 'Coordinates',
        value: (data.latitude && data.longitude)
          ? `<a href="https://maps.google.com/?q=${data.latitude},${data.longitude}" target="_blank" rel="noopener">${Number(data.latitude).toFixed(4)}, ${Number(data.longitude).toFixed(4)}</a>`
          : '—'
      },
      {
        label: 'AS Number',
        value: data.asn || '—'
      },
    ];

    for (const row of rows) {
      const el = document.createElement('div');
      el.className = 'geo-row';
      el.innerHTML = `<div class="geo-row-label">${row.label}</div><div class="geo-row-value">${row.value}</div>`;
      container.appendChild(el);
    }
  }

  // ── Fetch my IP ────────────────────────────────────────────
  async function fetchMyIP() {
    // Primary: ipify
    const resp = await fetch('https://api.ipify.org?format=json');
    if (!resp.ok) throw new Error('ipify failed');
    const data = await resp.json();
    return data.ip;
  }

  async function fetchGeo(ip) {
    const url = `https://ipapi.co/${ip}/json/`;
    const resp = await fetch(url);
    if (!resp.ok) throw new Error(`Geo lookup failed (${resp.status})`);
    const data = await resp.json();
    if (data.error) throw new Error(data.reason || 'Geo lookup error');
    return data;
  }

  // ── Load my IP on page load ────────────────────────────────
  async function loadMyIP() {
    const loadingEl  = document.getElementById('my-ip-loading');
    const contentEl  = document.getElementById('my-ip-content');
    const ipValueEl  = document.getElementById('my-ip-value');
    const errorEl    = document.getElementById('my-ip-error');
    const geoWrapEl  = document.getElementById('my-ip-geo');
    const geoGridEl  = document.getElementById('my-geo-grid');

    try {
      const ip = await fetchMyIP();
      loadingEl.classList.add('hidden');
      contentEl.classList.remove('hidden');
      ipValueEl.textContent = ip;

      // Now fetch geo
      try {
        const geo = await fetchGeo(ip);
        buildGeoGrid(geoGridEl, geo);
        geoWrapEl.classList.remove('hidden');
      } catch (geoErr) {
        // Show IP but skip geo
        errorEl.textContent = 'Geolocation unavailable: ' + geoErr.message;
        errorEl.classList.remove('hidden');
      }
    } catch (err) {
      loadingEl.classList.add('hidden');
      contentEl.classList.remove('hidden');
      ipValueEl.textContent = 'Unknown';
      errorEl.textContent = 'Could not detect IP: ' + err.message;
      errorEl.classList.remove('hidden');
    }
  }

  // ── Lookup any IP ──────────────────────────────────────────
  async function lookupIP(ip) {
    const loadingEl = document.getElementById('lookup-loading');
    const resultEl  = document.getElementById('lookup-result');
    const errorEl   = document.getElementById('lookup-error');
    const ipValEl   = document.getElementById('lookup-ip-value');
    const geoGridEl = document.getElementById('lookup-geo-grid');

    errorEl.classList.add('hidden');
    resultEl.classList.add('hidden');
    loadingEl.classList.remove('hidden');

    try {
      const geo = await fetchGeo(ip);
      loadingEl.classList.add('hidden');
      ipValEl.textContent = ip;
      buildGeoGrid(geoGridEl, geo);
      resultEl.classList.remove('hidden');
    } catch (err) {
      loadingEl.classList.add('hidden');
      errorEl.textContent = 'Lookup failed: ' + err.message;
      errorEl.classList.remove('hidden');
    }
  }

  // ── Event listeners ────────────────────────────────────────
  document.getElementById('lookup-btn').addEventListener('click', () => {
    const input   = document.getElementById('ip-input');
    const errorEl = document.getElementById('lookup-error');
    const val     = input.value.trim();

    errorEl.classList.add('hidden');

    if (!val) {
      errorEl.textContent = 'Please enter an IP address.';
      errorEl.classList.remove('hidden');
      input.focus();
      return;
    }
    if (!isValidIP(val)) {
      errorEl.textContent = 'Please enter a valid IPv4 or IPv6 address.';
      errorEl.classList.remove('hidden');
      input.focus();
      return;
    }

    lookupIP(val);
  });

  document.getElementById('ip-input').addEventListener('keydown', e => {
    if (e.key === 'Enter') document.getElementById('lookup-btn').click();
  });

  // ── Init ───────────────────────────────────────────────────
  loadMyIP();