<header>
  <h1 class="title">Javascript Clock</h1>
</header>

<section class="clock">
  <div class="dot"></div>
  <div class="spire hour"></div>
  <div class="spire min"></div>
  <div class="spire sec"></div>
  <div class="digit">00:00</div>
</section>

<footer>
  Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a></footer>

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: #9b59b6;
  background: linear-gradient(to top left, #9b59b6, #f39c12);
}

.title {
  font: 36px Arial;
  letter-spacing: 0.1em;
  padding: 10px 5px;
  color: rgba(256, 256, 256, 0.8);
}
@media only screen and (min-width: 768px) {
  .title {
    font: 48px Arial;
  }
}

.clock {
  width: 200px;
  height: 200px;
  border: solid 10px #333;
  border-radius: 50%;
  position: relative;
  background: rgba(256, 256, 256, 0.25);
  cursor: pointer;
  margin: auto;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
  .clock {
    width: 300px;
    height: 300px;
    border: solid 15px #333;
  }
}

.dot {
  background: red;
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  display: none;
}

.spire {
  position: absolute;
}

.hour {
  top: calc(50% - 37.5px);
  left: calc(50% - 2.5px);
  width: 5px;
  height: 40px;
  border-radius: 0 0 5px 5px;
  background: #333;
  z-index: 4;
  transform-origin: 2.5px 37.5px;
  transition: transform 2s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
  .hour {
    top: calc(50% - 57.5px);
    left: calc(50% - 2.5px);
    width: 5px;
    height: 60px;
    transform-origin: 2.5px 57.5px;
  }
}

.min {
  top: calc(50% - 67.5px);
  left: calc(50% - 2.5px);
  width: 5px;
  height: 70px;
  border-radius: 0 0 5px 5px;
  background: rgba(167, 139, 131, 1);
  z-index: 3;
  transform-origin: 2.5px 67.5px;
  transition: transform 1s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
  .min {
    top: calc(50% - 102.5px);
    left: calc(50% - 2.5px);
    width: 5px;
    height: 105px;
    transform-origin: 2.5px 102.5px;
  }
}

.sec {
  top: calc(50% - 78.75px);
  left: calc(50% - 1.25px);
  width: 2.5px;
  height: 80px;
  border-radius: 0 0 2.5px 2.5px;
  background: rgba(231, 76, 60, 1);
  z-index: 2;
  transform-origin: 1.25px 78.75px;
  transition: transform .5s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
  .sec {
    top: calc(50% - 118.75px);
    left: calc(50% - 1.25px);
    width: 2.5px;
    height: 120px;
    transform-origin: 1.25px 118.75px;
  }
}

.digit {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  font: 42px/200px Arial;
  color: rgba(32, 32, 32, 0.6);
  display: none;
  z-index: -10;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
  .digit {
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    width: 300px;
    font: 58px/300px Arial;
  }
}
.clock:hover > .digit {
  display: block;
}

footer {
  font: 14px Arial;
  color: rgba(256, 256, 256, 0.8);
  width: 100vw;
  padding: 5px;
}
footer a {
  color: rgba(51, 51, 51, 0.85);
  text-decoration: none;
}
footer a:hover {
  color: rgba(256, 256, 256, 0.8);
  text-decoration: underline;
}

// add analogic switch option

var date = new Date(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds(),
    hourElt = document.getElementsByClassName("hour")[0],
    minElt = document.getElementsByClassName("min")[0],
    secElt = document.getElementsByClassName("sec")[0],
    digit = document.getElementsByClassName("digit")[0];

moveTime();

function moveTime() {
  moveSec();
  moveMin();
  moveHour();  
}

function moveSec() {
  var turnSec = sec*6;
  secElt.style.transform = "rotate(" + turnSec + "deg)";
  secElt.style.webkitTransform = "rotate(" + turnSec + "deg)";
  // for each sec after first
  var eachSec = setInterval(function () {
    turnSec += 6;
    secElt.style.transform = "rotate(" + turnSec + "deg)";
    secElt.style.webkitTransform = "rotate(" + turnSec + "deg)";
  }, 1000);
}

function moveMin() {
  var turnMin = min*6;
  minElt.style.transform = "rotate(" + turnMin + "deg)";
  minElt.style.webkitTransform = "rotate(" + turnMin + "deg)";
  // display digit on hover; short condition to keep 00:00 format
  digit.innerHTML = (new Date().getHours()<10?'0':'') + date.getHours() + ":" + (new Date().getMinutes()<10?'0':'') + date.getMinutes();
  // after first min leftovers
  setTimeout(function () {
    turnMin += 6;
    minElt.style.transform = "rotate(" + turnMin + "deg)";
    minElt.style.webkitTransform = "rotate(" + turnMin + "deg)";
    // display digit on hover; short condition to keep 00:00 format
    digit.innerHTML = (new Date().getHours()<10?'0':'') + new Date().getHours() + ":" + (new Date().getMinutes()<10?'0':'') + new Date().getMinutes();
    // for each min after first
    var eachMin = setInterval(function () {
      turnMin += 6;
      minElt.style.transform = "rotate(" + turnMin + "deg)";
      minElt.style.webkitTransform = "rotate(" + turnMin + "deg)";
      // display digit on hover; short condition to keep 00:00 format
      digit.innerHTML = (new Date().getHours()<10?'0':'') + new Date().getHours() + ":" + (new Date().getMinutes()<10?'0':'') + new Date().getMinutes();
    }, 60000);
  }, (60 - sec) * 1000);
}

function moveHour() {
  if(hour > 11) {hour -= 12;}
  var turnHour = hour*30;
  hourElt.style.transform = "rotate(" + turnHour + "deg)";
  hourElt.style.webkitTransform = "rotate(" + turnHour + "deg)";
  // after first hour leftovers
  setTimeout(function () {
    turnHour += 30;
    hourElt.style.transform = "rotate(" + turnHour + "deg)";
    hourElt.style.webkitTransform = "rotate(" + turnHour + "deg)";
    // for each hour after first
    var eachHour = setInterval(function () {
      turnHour += 30;
      hourElt.style.transform = "rotate(" + turnHour + "deg)";
      hourElt.style.webkitTransform = "rotate(" + turnHour + "deg)";
    }, 3600000);
  }, (60 - min) * 60000);
}