Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

• Solution URL
• Live URL

My process

Built with

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

What I learned

This challenge really helped me get a solid grasp on using APIs. Some code I'm proud of:

fetch("https://ipapi.co/json/")
  .then((res) => res.json())
  .then((data) => renderresult(data))
  .catch((error) => displayError(error));

function renderresult(data) {
  if (data.error) {
    throw `${data.reason}`;
  }
  const ipadd = document.getElementById("ipadd");
  const location = document.getElementById("location");
  const timezone = document.getElementById("timezone");
  const isprovider = document.getElementById("isprovider");
  ipadd.innerHTML = data.ip;
  isprovider.innerHTML = data.org;
  location.innerHTML = `${data.city}, ${data.region}, ${data.country_name}`;
  if (data.utc_offset !== null) {
    timezone.innerHTML =
      "UTC: " + data.utc_offset.slice(0, 3) + ":" + data.utc_offset.slice(3);
  } else {
    timezone.innerHTML = data.timezone;
  }
  map.setView([data.latitude, data.longitude], 13);
  marker.setLatLng([data.latitude, data.longitude]);
  marker.bindPopup(`<b>${data.ip}</b>`).openPopup();
}

Author

• Website - Jitesh117
• Frontend Mentor - @Jitesh117
• Twitter - @Jitesh_117