IP Address Tracker

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

Table of contents

• Challenge
• Links
• Technologies
• Wokflow
• Sources
• Screenshots
• Author

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

Links

• Solution on Frontend Mentor
• Live website
• GitHub repository

Technologies

• HTML5
• CSS3
• Vanilla JavaScript
• IP Geolocation API - IPWHOIS.IO
• Leaflet library for generating interactive maps

Workflow

1. Project initialization as a public repository on GitHub
2. Planning out HTML structure and CSS classes based on design files
3. Writing out HMTL and preparing it for DOM interactions with JavaScript
4. Styling the page from top to bottom by utilizing mobile-first approach
5. Adding media queries for desktop layout
6. Integrating IP Geolocation into the script
7. Adding the interactive map and binding it to Geolocation data
8. Configuring repository to publish code with GitHub Pages

Sources

• IPWHOIS.IO Docs
• Leaflet Docs

Screenshots

Author

• GitHub profile - Toni Kulić
• Frontend Mentor - @tkulic