JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="clockclock"></div>

CSS

.needle{
    position: absolute;
    top: 50%;
    left:50%;
    background-color:black;
    height:10%;
    margin: -5% 0 0 -5%;    
    -moz-transform-origin: 5% center;
    -webkit-transform-origin: 5% center;
    -o-transform-origin: 5% center;
    transform-origin: 5% center;
    transition-duration: 1s; 
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
  
.long { width: 50%;}
.short { width: 40%;}

.clock
{
  float:left;
  position:relative;
  height: 31%;
  width: 44%;
  border: 2px solid #f7f7f7;
  -moz-border-radius: 42%;
  -webkit-border-radius: 42%;
  -o-border-radius: 42%;
  border-radius: 42%;
  background-color:#f9f9f9;
}

.block{
  position:relative;
  float:left;
  height:50%;
  width:16.6%;
}
  
#clockclock
{
  position:absolute;
  top:42%;
  width: 369px;
  height: 369px;
  display: block;
}

JavaScript

var digitsArray = [
          [2,0 , 2,4 , 6,2 , 6,2 , 6,0 , 6,4] , //0
          [9,19 , 4,2 , 9,9 , 6,2 , 9,9 , 6,6] , //1
          [0,0 , 4,2 , 0,2 , 6,4 , 6,0 , 4,4] , //2
          [0,0 , 4,2 , 0,0 , 4,6 , 0,0 , 4,6] , //3
          [2,2 , 2,2 , 6,0 , 4,6 , 9,9 , 6,6] , //4
          [2,0 , 4,4 , 6,0 , 2,4 , 0,0 , 4,6] , //5
          [2,0 , 4,4 , 6,2 , 2,4 , 6,0 , 4,6] , //6
          [0,0 , 4,2 , 9,9 , 6,2 , 9,9 , 6,6] , //7
          [0,2 , 4,2 , 6,0 , 6,4 , 0,6 , 4,6] , //8
          [0,2 , 4,2 , 6,0 , 6,2 , 0,0 , 6,4]]; //9     

var clockContainer = document.getElementById("clockclock");

function resizeContainer()
{
  clockContainer.style.width = document.body.clientWidth+"px";
  clockContainer.style.height = Math.floor(document.body.clientWidth*0.5)+"px";
  clockContainer.style.marginTop = Math.floor(-0.25*document.body.clientWidth)+"px";
}

window.onresize = resizeContainer;
resizeContainer();

function Clock()
{
  this.node = document.createElement("div");
  this.node.setAttribute("class","clock");
  
  this.set = function(s,l)
    {
        var shortangle = s*45+"deg";
        if(s==9) this.needles[0].setAttribute("style","background-color:#e9e9e9;");
        else
          this.needles[0].setAttribute("style","-webkit-transform: rotate("+shortangle+"); -moz-transform: rotate("+shortangle+"); transform: rotate("+shortangle+")");
      
        var longangle = l*45+"deg";
        if(l==9)  this.needles[1].setAttribute("style","background-color:#f1f1f1;");
        else
        this.needles[1].setAttribute("style","-webkit-transform: rotate("+longangle+"); -moz-transform: rotate("+longangle+"); transform: rotate("+longangle+")");
    };
  
  this.needles=[];
  for(var n=0; n<2; n++) //2 needles per clock
  {
    var needle = document.createElement("div");
    needle.setAttribute("class","needle "+(n===0?"short":"long"));
    this.needles.push(needle);
    this.node.appendChild(needle);
  }
  
  
}

function Block()
{
  this.digits = [];
  
 ...