index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | IP Address Tracker</title>

    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap"
      rel="stylesheet"
    />

    <!-- Leaflet CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />

    <link rel="stylesheet" href="styles.css" />

    <!-- Leaflet JS -->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>

    <script type="module" src="scripts/index.js"></script>
  </head>
  <body>
    <header class="top-container">
      <h1 class="main-heading">IP Address Tracker</h1>

      <form class="form" novalidate>
        <input
          type="text"
          class="input"
          placeholder="Search for any IP address or domain"
          aria-label="Type IP address or Domain name"
        />
        <button
          class="submit-btn"
          type="submit"
          aria-label="Hit Search"
        ></button>
      </form>

      <dl class="user-data-list">
        <div class="user-data-item">
          <dt class="data-term">IP Address</dt>
          <dd class="data-value"></dd>
        </div>

        <div class="user-data-item">
          <dt class="data-term">Location</dt>
          <dd class="data-value"></dd>
        </div>

        <div class="user-data-item">
          <dt class="data-term">Timezone</dt>
          <dd class="data-value"></dd>
        </div>

        <div class="user-data-item">
          <dt class="data-term">ISP</dt>
          <dd class="data-value"></dd>
        </div>
      </dl>
    </header>

    <div id="map">
      <h1 class="loading-text">Loading...</h1>
    </div>

    <footer class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://www.frontendmentor.io/profile/sapinder-pal">Sapinder</a>.
    </footer>
  </body>
</html>