Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

IP TRACKER WITH MARKER FUNCTINOLATIES

accessibility, bootstrap, contentful, fetch
aLpSabre•180
@alpbrace
A solution to the IP Address Tracker challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Dear Frontend Mentor Challegers,

I am happy to share this project IP Tracker with you guys.

In this website that I built, 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 in n both formats IPv4 and IPv6 and see the key - information and location
  • See the instructions to use the application in their first visit
  • See the ip adresses that they searched for before in the ip tracker
  • See the information about the marker, when they clicked on it
  • Delete the markers

I would like to also share with you the usefull resources for this project as well.

  • Leaflet JS Library => (https://leafletjs.com/examples/quick-start/) -I used this JS Library for the interactive map on the project.
  • IAPI => (https://ipapi.co/) -I used this API to get the informations about IP's.
  • Ipify => (https://www.ipify.org/) -I used this API to get the informations about IP's.
  • JAWG => (https://www.jawg.io/docs/) -I used the tile for the map with Leaflet.
  • Leaflet Providers => (https://github.com/leaflet-extras/leaflet-providers) -An extension to Leaflet that contains configurations for various free tile providers.

Please feel free to give feedback,it will be much appreciated.

Keep Coding!

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 aLpSabre'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