IP Address Tracker | HTML, CSS & JavaScript

IP Address Tracker with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #29

Project Overview

An IP Address Tracker built using HTML, CSS, and JavaScript that allows users to track and view geographical and network details of an IP address.
The application fetches real-time location data using public IP and geolocation services and displays the information in a simple and user-friendly interface.

Key Features

Track location details of any IP address.
Auto-detects the user’s current IP.
Displays city, region, country, ISP, and timezone.
Uses reliable public APIs with no authentication required.
Handles invalid IP and network errors gracefully.
Clean, responsive, and easy-to-use interface.
Suitable for frontend-only applications.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>IP Address Tracker</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="ip-container">
    <h2>IP Address Tracker</h2>

    <div class="search-box">
      <input
        type="text"
        id="ipInput"
        placeholder="Enter IP address (optional)"
      />
      <button onclick="trackIP()">Track</button>
    </div>

    <div id="result" class="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ip-container {
  background: #ffffff;
  width: 360px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 15px;
}

.search-box {
  display: flex;
  margin-bottom: 15px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ccc;
}

.search-box button {
  padding: 10px 16px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.result {
  margin-top: 15px;
  text-align: left;
  font-size: 14px;
}

.result p {
  margin: 6px 0;
}

.error {
  color: red;
  text-align: center;
}

Javascript Code

const result = document.getElementById("result");

function trackIP() {
  const inputIP = document.getElementById("ipInput").value.trim();

  result.innerHTML = "Loading...";

  // If user enters IP, use it. Otherwise auto-detect.
  if (inputIP) {
    fetchGeo(inputIP);
  } else {
    fetch("https://api.ipify.org?format=json")
      .then(res => res.json())
      .then(data => fetchGeo(data.ip))
      .catch(() => {
        result.innerHTML = "<p class='error'>Unable to detect IP</p>";
      });
  }
}

function fetchGeo(ip) {
  fetch(`https://get.geojs.io/v1/ip/geo/${ip}.json`)
    .then(res => res.json())
    .then(data => {
      result.innerHTML = `
        <p><strong>IP:</strong> ${data.ip}</p>
        <p><strong>City:</strong> ${data.city}</p>
        <p><strong>Region:</strong> ${data.region}</p>
        <p><strong>Country:</strong> ${data.country}</p>
        <p><strong>ISP:</strong> ${data.organization}</p>
        <p><strong>Timezone:</strong> ${data.timezone}</p>
      `;
    })
    .catch(() => {
      result.innerHTML = "<p class='error'>Unable to fetch IP details</p>";
    });
}