anushkachauhxn / ip-address-tracker

An app that allows the user to search for the real-world location of an IP Address using IP Geolocation API to fetch the data and LeafletJS for displaying the map.

🎯 Frontend Mentor - IP Address Tracker Solution

This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

📜 Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

📝 Overview

The challenge

• Your challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible.
  • To get the IP Address locations, you'll be using the IP Geolocation API by IPify.
  • To generate the map, we recommend using LeafletJS.

• Your users should be able to:
  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements on the page
  • See their own IP Address on the map on the initial page load
  • Search for any IP addresses or domains and see the key information and location

Screenshot

Links

• Solution URL: Link
• Live Site URL: Link

💡 My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Vanilla JS
• Leaflet JS

What I learned

😎 Proud of this JS:

/* ------------ MAP DISPLAY ------------ */
const map_url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

const map = L.map("map").setView([0, 0], 16);
const tiles = L.tileLayer(map_url, {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
tiles.addTo(map);

const icon = L.icon({
  iconUrl: "./assets/icon-location.svg",
  iconSize: [46, 56], // size of the icon
  iconAnchor: [23, 56], // point of the icon which will correspond to marker's location
});
const marker = L.marker([0, 0], { icon: icon });
marker.addTo(map);

function loadMapView(lat, lng) {
  map.setView([lat, lng], 16);
  marker.setLatLng([lat, lng]);
}

Useful resources

• Leaflet Quick Start Guide
• Markers With Custom Icons
• IP Geolocation API Docs
• Using Fetch | MDN Web Docs

⭐ Author

• LinkedIn - @anushka-chauhan
• GitHub - @anushkachauhxn
• Behance - @anushkachauhan
• Twitter - @anushkachauhxn