JSFiddle - React, Tailwind, and code Playground

by MariusNastasa

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Analog Clock</title>
    <script type="text/javascript" src="script.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="analog-clock">
      <svg width="140" height="140">
        <circle id="clock-face" cx="70" cy="70" r="65" />
        <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
        <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
        <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
        <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
        <text x="62" y="18">12</text>
        <text x="126" y="76">3</text>
        <text x="66" y="130">6</text>
        <text x="7" y="76">9</text>
      </svg>
      <div class="time-text">
        <span id="hr">00</span>
        <span>:</span>
        <span id="min">00</span>
        <span>:</span>
        <span id="sec">00</span>
        <span id="suffix">--</span>
      </div>
    </div>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 14px;
}

.analog-clock {
  width: 140px;
  height: 140px;
}

#clock-face {
  stroke: red;
  stroke-width: 2px;
  fill: blue;
}

#h-hand,
#m-hand,
#s-hand,
#s-tail {
  stroke: black;
  stroke-linecap: round;
}

#h-hand {
  stroke-width: 3px;
}

#m-hand {
  stroke-width: 2px;
}

#s-hand {
  stroke-width: 1px;
}

.time-text {
  text-align: center;
}

JavaScript

function clock() {
  //calculate angle
  var d, h, m, s;
  d = new Date;

  h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
  m = 6 * d.getMinutes();
  s = 6 * d.getSeconds();

  //move hands
  setAttr('h-hand', h);
  setAttr('m-hand', m);
  setAttr('s-hand', s);
  setAttr('s-tail', s + 180);

  //display time
  h = d.getHours();
  m = d.getMinutes();
  s = d.getSeconds();

  if (h >= 12) {
    setText('suffix', 'PM');
  } else {
    setText('suffix', 'AM');
  }

  if (h != 12) {
    h %= 12;
  }

  setText('sec', s);
  setText('min', m);
  setText('hr', h);

  //call every second
  setTimeout(clock, 1000);

};

function setAttr(id, val) {
  var v = 'rotate(' + val + ', 70, 70)';
  document.getElementById(id).setAttribute('transform', v);
};

function setText(id, val) {
  if (val < 10) {
    val = '0' + val;
  }
  document.getElementById(id).innerHTML = val;
};

window.onload = clock;