Clock

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Clock</title>

  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <div class="clock">
    <span class="hand hours"></span>
    <span class="hand minutes"></span>
    <span class="hand seconds"></span>
  </div>

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

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

body {
  background: linear-gradient(to right, #4b79a1, #283e51);
  height: 100vh;
  display: flex;
}

.clock {
  width: 27vw;
  height: 27vw;
  min-width: 330px;
  min-height: 330px;
  margin: auto;
  border-radius: 50%;
  border: 15px solid #4a0072;
  position: relative;
  display: flex;
  justify-content: center;
}

.hand {
  position: absolute;
  align-self: center;
  border-radius: 50%;
  background: #000;
}

.hours {
  width: 5px;
  height: 25%;
}

.minutes {
  width: 3px;
  height: 35%;
}

.seconds {
  width: 2px;
  height: 45%;
}

function setClock() {
  const hoursHand = document.querySelector('.hours'),
        minutesHand = document.querySelector('.minutes'),
        secondsHand = document.querySelector('.seconds');

  let now = new Date(),
      seconds = now.getSeconds(),
      minutes = now.getMinutes(),
      hours = now.getHours(),

      hoursAngle = (360 * hours) / 12,
      minutesAngle = (360 * minutes) / 60,
      secondsAngle = (360 * seconds) / 60;

  hoursHand.style.transform = `rotate(${hoursAngle}deg) translate(0, -50%)`;
  minutesHand.style.transform = `rotate(${minutesAngle}deg) translate(0, -50%)`;
  secondsHand.style.transform = `rotate(${secondsAngle}deg) translate(0, -50%)`;
}

setInterval(setClock, 1000);