index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <link href="styles-mobile.css" rel="stylesheet" 
  media="screen and (max-device-width: 600px)">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    function findIP(){
      const apiKey = "at_ZsQkxUILe80D3yhJt9AKMwUzlGRYN";    // should be kept in a non-public file
      let re = /(?:\d{1,3}\.){3}\d{1,3}/g;
      let ip = document.getElementById("input-location");   // hardcoding
      if(!re.test(ip.value))
        getip();
      else {
      let url = `https://geo.ipify.org/api/v1?apiKey=at_ZsQkxUILe80D3yhJt9AKMwUzlGRYN&ipAddress=${ip.value}`;
      fetch(url,{apiKey: apiKey, ipAddress: ip.value}).then(response => response.json())
        .then(data => {
          // console.log(data);
          $("#h3-ipaddress").html(data.ip.length === 0 ? "Unknown IP" : data.ip);
          $("#h3-location").html(`${data.location.city.length === 0 ? 'Unknown location' : data.location.city+', '+ data.location.country}`);
          $("#h3-timezone").html(`${data.location.timezone.length === 0 ? "Unknown timezone" : 'UTC '+data.location.timezone}`);
          $("#h3-isp").html(data.isp);
          drawMap([data.location.lat,data.location.lng]);
        });
    }
  }
    function getip() {
    var url = $('#input-location').val();
    var getLocation = function(href) {
      var l = document.createElement("a");
      l.href = href;
      return l;
  };
  //var l = getLocation(url);
  //var url = l.hostname;
  $.ajax({
      type: "GET",
      url: "getip",
      data: { url: getLocation(url).hostname },
      contentType: "application/json; charset=utf-8",
      success: function(results){
        $('#ipv4_address').val(results);
      },
      error: function(){
      }
  });
}
  </script>
  <title>Frontend Mentor | IP Address Tracker</title>
</head>
<body>
  <div class="top-section">
    <h1 id="banner-text">IP Address Tracker</h1>
    <form id="form-ip" name="form-ip" onsubmit="findIP();return false">
    <div class="top-section-container">
        <input id="input-location" placeholder="Search for any IP address or domain" autocomplete="off">
        <button id="button-enter-location" onclick="findIP()" type="submit">
    </div>
  </form>
  </div>
  <div class="bottom-section">
    <div class="infobox-container">
      <div id="ipaddress-infobox" class="infobox">
        <p>IP Address</p>
        <h3 id="h3-ipaddress"></h3>
      </div>
      <div class="infobox-divider"></div>
      <div id="location-infobox" class="infobox">
        <p>Location</p>
        <h3 id="h3-location"></h3>
      </div>
      <div class="infobox-divider"></div>
      <div id="timezone-infobox" class="infobox">
        <p>Timezone</p>
        <h3 id="h3-timezone"></h3>
      </div>
      <div class="infobox-divider"></div>
      <div id="isp-infobox" class="infobox">
        <p>ISP</p>
        <h3 id="h3-isp"></h3>
      </div>
    </div>
    <div id="mapid"></div>
    <script>
      var mymap = L.map('mapid');
      function drawMap(locationVar){
        // console.log("locationvar: ", locationVar)
        // if(locationVar.length === 0)
        //   // mymap.setView([51.505, -0.09], 13);
        // else
          mymap.setView(locationVar, 13);
  
  var customMarkerIcon = L.icon({
iconUrl: 'images/icon-location.svg',
// iconSize: [38, 95],
iconAnchor: [0, 0],
popupAnchor: [25, -10],});
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(mymap);
  L.marker(locationVar, {icon: customMarkerIcon}).addTo(mymap);
}
    </script>
  </div>
  </div>
</body>
</html>