JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<h1>IP Lookup</h1>
<p id="ipInfo"></p>

JavaScript

fetch('https://api.ipify.org?format=json')
  .then(response => response.json())
  .then(data => {
  const ip = data.ip;
  return fetch(`https://ipinfo.io/${ip}/geo`);
})
  .then(response => response.json())
  .then(data => {
  const info = `
                        IP: ${data.ip}<br>
                        City: ${data.city}<br>
                        Region: ${data.region}<br>
                        Country: ${data.country}<br>
                        Location: ${data.loc}<br>
                        Org: ${data.org}<br>
                        Postal: ${data.postal}
                    `;
  document.getElementById('ipInfo').innerHTML = info;
})
  .catch(error => {
  document.getElementById('ipInfo').innerHTML = 'Error fetching IP information';
  console.error('Error:', error);
});