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
  • How to use lealetjs
• Author

Overview

The challenge

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: "github"
• Live Site URL: "site"

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Javascript
• IP Geolocation API
• Leafletjs

How to use lealetjs

let mapOptions = {
  center: [latitude, longitude],
  zoom: 20,
};

// Creating a map object
let map = new L.map("map", mapOptions);

// Creating a Layer object
let layer = new L.TileLayer(
  "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
);

// Adding layer to the map
map.addLayer(layer);

// Add a location marker
L.marker([latitude, longitude]).addTo(map);

Author

• Frontend Mentor - @FaisalKhan2000
• Twitter - @faisal_khan2k