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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla JavaScript
- Leaflet Library
Learned how to hide API keys and deploy site on vercel. Additionally, learned how to integrate Leaflet library.
The current design is not suitable for mobile screens. I plan to remake this site with a more accessible design in future.
- Hiding API Keys in Javascript Netlify - This helped with hiding the API key from github. I modified it to make it work for vercel. Note: API key can still be seen using developer tools.
- ipgeolocation API - I'm using this API to fetch the data as this provides better free options than ipify.
- Frontend Mentor - @FazleLabib
If it seems like the website is not working, you can try disabling some of the extensions you might have on your browser.