This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
A desktop view of how the web app looks like
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Semantic HTML tags
- Mobile-first workflow
- Less - CSS preprocessors
- Bootstrap - CSS library
- LeafletJS - For Map
- IP Geolocation API by IPify - For IP address
-
JS Fiddle Snippet - This helped me for understanding how to change map location while using LeafletJS. I really liked this pattern and will use it going forward.
-
StackOverflow Discussion - I found this discussion while trying to fecth user location and ip address without a given access. I find this very useful as this worked out with what the challenge is about.
-
LeafletJS - For the mapping API, I recommend using it; It's free to use and doesn't require an API Key. If you decide to use another API, like Google Maps or Mapbox, be sure to secure your API Key. Here are guides for both Google Maps and Mapbox, be sure to read through them thoroughly:
- Website - Michael Ajayi
- Frontend Mentor - @michaelajayi150
- Twitter - @michaelajayi150
- LinkedIn - @ajayi-michael-692bb6203