Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

IP Address Tracker using html, CSS and ES6

@Afshar07

Desktop design screenshot for the IP Address Tracker coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any Comment and feedback would be appreciated!

Community feedback

Rayane 1,935

@RayaneBengaoui

Posted

Hello Amir Afshar,

Congrats for completing this challenge ! 🙂

I would like to suggest :

  • Add background-repeat: no-repeat and background-size: cover on your header to make the background fill the entire container and avoid duplication of the image.

  • Add something that shows it's processing during the loading time for the user experience. On my solution I used a classic spinner, but also something else.

  • Handle invalid input. You could use a try/catch or even a Regex to filter invalid inputs and display an error message to the user.

  • On mobile view, move the Zoom in/out buttons to the bottom because it's hidden between the info container. If you are blocked, I've made it on my solution to this challenge. Also, you can read the official documentation of leaflet where they explain it.

  • Add some more padding and spacing to match better the design.

Overall, well done for the challenge and happy coding ! 😃

0

@Afshar07

Posted

@RayaneBengaoui Hey Rayan, Thanks for the tips <3 I'm gonna make the changes ASAP, thank you for pointing out those stuff ^_^

0

Please log in to post a comment

Log in with GitHub
Discord logo

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