Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

IP Address Tracker with IPAPI and Leaflet

accessibility
Joshua Dail•290
@joshdail
A solution to the IP Address Tracker challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Here is my solution to the challenge. I did make a few adjustments from the original design:

  • Search bar has an added outline for focus state to improve visibility
  • Site displays in dark mode if the browser prefers a dark color scheme (the search bar and results bar are darkened, and the map is overlaid with a filter to reduce brightness)
  • I used IPAPI instead of IP Geolocation API for looking up IP addresses, since it does not require an API key and has a more generous free tier. This does come at the cost of the app not being able to take domain names as input. Only IPV4 and IPV6 addresses can be accepted

Feedback, comments, suggestions are always welcome.

  • The results bar is designed to have a responsive rather than a fixed width. This is mainly to accommodate longer IPV6 addresses or location names
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Joshua Dail's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License