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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • 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 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

-I also added this functionalies:

Users should be able to:

• Search for any IP addresses or domains in both formats IPv4 and IPv6
• See the instructions to use the application at their first visit
• See the ip adresses that they searched for before in the ip tracker
• See the information about the marker, when they clicked on it
• Delete the markers

Screenshot

-💻 Desktop-View

-📱 Mobile-View

Links

• Solution URL: click here.
• Live Site URL: click here.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Bootstrap
• Flexbox
• Mobile-first workflow
• JavaScript-DOM
• SweetAlert

What I learned

I have learned how to fetch data from an API with asyn functions and use special methods from the API's

const getIP = async function (ip) {
  try {
    const res = await fetch(`https://ipapi.co/${ip}/json/`);

    if (res.error) {
      renderError();
      throw new Error(`${res.status}`);
    }
    const data = await res.json();
    renderData(data);
  }
  catch (error) {
    
  }
}

Useful resources

• Leaflet JS Library -I used this JS Library for the interactive map on the project.
• IAPI -I used this API to get the informations about IP's.
• Ipify -I used this API to get the informations about IP's.
• JAWG -I used the tile for the map with Leaflet.
• Leaflet Providers -An extension to Leaflet that contains configurations for various free tile providers.

Author

• Frontend Mentor - @alpbrace