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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Your challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible. To get the IP Address locations, you'll be using the IP Geolocation API by IPify. To generate the map, we recommend using LeafletJS.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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

• Solution URL: Solution URL here
• Live Site URL: Live site URL here

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind - CSS framework, helped built the webpage much faster and easier.
• Parcel - Build Tool for compiling and minifying my html,css and js codes
• Vanilla JS

If there's one thing I haven't tried with making ajax calls using fetch, it's going to be the code I shared below, I used this in my project, enabling the client to either enter ipv4/ipv6 addresses such as 8.8.8.8 or 152.156.12.122 and even domain names such as 'google.com or twitter.com` and for either of both entered it makes a different fetch request.

const res = await fetch(`https://geo.ipify.org/api/v2/country,city?apiKey=myIP...${value ? `&ipAddress=${value}` : ""}${domain ? `&domain=${domain}` : ""}`);

I want to keep getting better in what I do, I'm yet to attain my possible best, I also for the first time worked with parcel in this project, it helped minified my code. And with the little experience I have building websites many years back using sites builders like wordpress and wix, I've learnt that a minified websites definitely reduces load times. And that's very crucial in any web development project.

I'm yet to fully get the hang of it, but I'll definitely get the hang of it pretty soon.

• Ipify - ipify API is a simple public IP address API, easy enough to integrate into any application in seconds.
• Leaflet - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS.

• Website - Abdullah Ayoola
• Frontend Mentor - @abdullah43577
• Twitter - @officialayo540