Geolocation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Geolocation</title>

  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <img class="rose" src="./img/rose.png" alt="Compass Rose">
  <img class="points" src="./img/points.png" alt="Cardinal Points">
  <div class="circle"></div>

  <div class="speed">
    <span class="speed-value">0</span>
    <span>km/h</span>
  </div>

  <script src="./scripts.js"></script>
</body>
</html>

:root {
  --heading: 0deg;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: linear-gradient(to right, #434343 0%, black 100%);
}

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px solid #fff;
}

.circle,
.rose,
.points {
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--heading));
  transition: all 2s;
  position: absolute;
}

.speed {
  color: #fff;
  font-size: 50px;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  position: absolute;
}

@media screen and (max-width: 550px) and (max-height: 600px) {
  .circle {
    width: 220px;
    height: 220px;
    border-width: 15px;
  }

  .rose,
  .points { width: 170px; }
  .speed { font-size: 40px; }
}

let speedTag = document.querySelector('.speed-value');

navigator.geolocation.watchPosition(position => {
  let heading = position.coords.heading || 255,
      speed = position.coords.speed || 27.93;

  document.documentElement.style.setProperty('--heading', `${heading}deg`);
  speedTag.textContent = speed;
}, (err) => console.error(err));