ip-address-tracker

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.

Table of contents

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

Overview

The challenge

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

Screenshot

Links

• Live Site URL: Live Demo
• Solution URL: Source Code

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• JavaScript
• LeafletJS API
• IPify API

What I learned

How to use user inputs for search query I tried using string concatenation for the search param but that didn't work so I went down a unproductive rabbit hole until I finally realized you just need to use backticks/ string interpolation... 🤦‍♀️

Once I realized that I quickly figured out that I also needed to scope the userQuery variable to the function so that it updates with the event listener and not beforehand.

Continued development

I didn't hide my API key because I ran out of time... 😅 but in the future I'd hide the key using either Netlify functions or dotenv files and NodeJS. I'm not worried about this at the moment because it's a free API (with limited requests).

Useful resources

Thanks to Scott O'Hara for teaching me that you can't add pseudo elements to input elements, you can only add them to container elements.

Getting the map going was pretty easy & getting it to update the coordinates was simple as well because the leaflet docs are great & easy to understand.

Author

• Website - Alekzandriia
• Frontend Mentor - @alekzandriia
• Twitter - @alekzandriia