Skip to content
Submitted about 2 years ago

IP Address Tracker | HTML CSS TS | ipwhois leaflet mapbox

Antoine C•1,210
@mattari97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...IP Address Tracker
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello everyone. This is my solution for the IP Address Tracker challenge.

I used ipwhois.io because of the credit system for geo.ipify.org however it means that the app only works with IP Address and not with domains.

It is the first time i worked with SCSS and i loved it 😀. I will probably always use it if I don't use tailwind for a project.

This time i wanted to make it as close to the design as possible without the design files so i created my own figma file based on the jpgs from the starter files.

I also chose to validate the form data with a Regexp & display the API errors in a custom made toast that hopefully you won't ever see because everything will work fine 😁.

Feel free to report any bugs and share some improvements you would like to see me implement in the project.

Have a good day/night. Peace 😊

Community feedback

  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    This looks great, Antoine! 😊 Was half hoping to see the toast in action, but no, that was the possible 😆

    One thing to report is, I'm currently in another city halfway across the world, but interestingly enough, the IP tracker is displaying my home city. I tried it with both Firefox and Chrome just to be sure, and it's the same result. Anyway, might be something to look into, I think.

    Also, well done on getting the solution looking as close as possible to the design!

    1
    Elaine•11,400
    @elaineleungPosted about 2 years ago

    Oh nevermind, mystery solved! I realize that my VPN on my computer was on autoconnect. So I'm viewing this with my computer hooked up to my phone's data and my phone also has the VPN running (the VPN location is my current city, not home city), and I thought I had turned off my computer VPN but no. Anyway, I checked this on my phone just now and also on my computer again, and the tracker is showing the correct city and information on both. Well, lesson learned!!

    1
    Antoine C•1,210
    @mattari97Posted about 2 years ago

    @elaineleung ahahah I was gonna ask maybe if you were on mobile data it would also probably show a location in your home city even without a VPN. But it was the VPN so problem solved. The API is not 100% accurate tho i must say. I live on an island in the carribeans and it locates me in the capital while i live in a city just next to it. But close enough !

    Anyway enjoy your trip Elaine. Peace 😊

    1

Please log in to post a comment

Log in with GitHub

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