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
  • Useful resources
• Author

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

-💻 Desktop-View

-📱 Mobile-View

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

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

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) {
    
  }
}

• 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.

• Frontend Mentor - @alpbrace