Day 4 - IP Address Tracker | Forntend Mentor Challenge

Today was my 3rd day and I had many complications when I was working on JavaScript and another challenge that I had to complete was that I had to complete the task within a day(24 hours). As a newbie to JavaScript it was very hard for me but my brother helped me in learning the basics of JavaScript. Due to which I was able to complete my task in one day otherwise it was very hard for me to complete the task in one day.

Overview

desktop-preview.jpg

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
  • Search for any IP addresses see the key information and location

Work

Today, I replicated the design and also worked on JavaScript to complete the task.

desktop-design.jpg

The Design I had to replicate

My Design.jpg

The Design I created

Today I learned about fetch API and how to use it. it was a great experience learning it. I had a-lot of fun learning it. And yes today I worked on API's for the first time. It was not a good experience working with API's that I had to use but I learned a-lot about API's and how to use them. And at the end of the day My task was complete I was satisfied with my work but I will improve these designs in future.