Get My IP

<div class="ip-card">
  <section class="ip-primary">
    <span>Your IP address</span>
    <strong id="ip">Loading...</strong>
  </section>
  <dl class="ip-details">
    <div><dt>Location</dt><dd id="location">Loading...</dd></div>
    <div><dt>Operating system</dt><dd id="os">Detecting...</dd></div>
    <div><dt>Screen resolution</dt><dd id="screen">Detecting...</dd></div>
  </dl>
</div>

.ip-card {
  max-width: 420px;
  padding: 24px;
  color: #20252d;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}

.ip-primary strong {
  display: block;
  margin-top: 8px;
  font-size: 1.5rem;
}

.ip-details > div { margin-top: 18px; }
.ip-details dt { color: #737b87; font-size: .8rem; }
.ip-details dd { margin: 4px 0 0; }

const fields = {
  ip: document.querySelector("#ip"),
  location: document.querySelector("#location"),
  os: document.querySelector("#os"),
  screen: document.querySelector("#screen"),
};

try {
  const response = await fetch("https://ipapi.co/json/");
  if (!response.ok) throw new Error("Request failed");
  const visitor = await response.json();

  fields.ip.textContent = visitor.ip ?? "Unavailable";
  fields.location.textContent = [
    visitor.city, visitor.region, visitor.country_name,
  ].filter(Boolean).join(", ") || "Unavailable";
  fields.os.textContent = navigator.userAgent;
  fields.screen.textContent =
    String(screen.width) + " x " + String(screen.height);
} catch {
  Object.values(fields).forEach(field => {
    field.textContent = "Unavailable";
  });
}

# No external packages
# Uses browser APIs and ipapi.co