/ip-address-tracker

7th Frontend Project From Frontend Mentor

Primary LanguageJavaScript

Frontend Mentor - IP address tracker solution

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

This is my

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

Links

My process

I first worked on the top of the app where you have the background image, heading, the input field with the button, and the container that displays the information of the ip-address. I messed around with the API Url to figure out how to use it and then I learned about leaflet and tried to figure out how to render the map to my app. I then tried to make the information inside the container change based off of the data the API was outputting. I then worked out around trying to make the map change locations based off the information the API was giving out and lastly worked on the mobile version.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • React - JS library

What I learned

I learned how to use API keys/API Urls and how to display that data on the frontend. Also learned how to use the leaflet library to display a map on the frontend.

Continued development

I want to continue getting better at knowing how to render data based off of APIs and render APIs correctly. Also want to get more comfortable using different libraries that I have never used.

Useful resources

  • W3Schools - Dictionary/Resource for HTML, CSS, Javascript References
  • StackOverFlow - Best site for looking up how to do things from in coding
  • CodeSandbox - CodeSandbox I was able to see examples of those using leaflet and this link specifically I learned how to dynamically change my map.

Author