JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="js-us-clock" class="clock"></div>

CSS

*{
    box-sizing: border-box;
}

.clock{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    display: block;
    height: 150px;
    width: 150px;
    border: 6px solid red;
    border-radius: 100%;
}
.clock:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px;
    display: block;
    height: 6px;
    width: 6px;
    background: red;
    border-radius: 100%;
}

.hour{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 3;
    display: block;
    height: 100%;
    width: 6px;
    padding: 30px 0;
    transition: transform .3s;
}
.hour:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: red;
}

.minute{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 2;
    display: block;
    height: 100%;
    width: 6px;
    padding: 10px 0;
    transition: transform .3s;
}
.minute:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: red;
}

JavaScript

Clock.prototype = {
    clocking: function(){
        var clockEle = this.element;
        var regionOffset = this.offset;
        var hourEle = document.createElement("div");
        var minuteEle = document.createElement("div");
          console.log(clockEle);
        // Append elements inside clock
        clockEle.appendChild(hourEle);
        hourEle.classList.add("hour");
        clockEle.appendChild(minuteEle);
        minuteEle.classList.add("minute");
  
        // get hands positions
        var hourPos;
        var minutePos;
        var currentMinute;
    
        // run once, then update clock every second.
        getTimePos();
        setInterval(function(){
            getTimePos();
        }, 1000);
        
        
        function getTimePos(){
            // gets hour and minute, transfer to 12 hour clock
            var hoursTime = new Date().getUTCHours() + regionOffset;
            if(hoursTime > 12){
                hoursTime = hoursTime-12;
            }
            var minutesTime = new Date().getUTCMinutes();
            
            // if minuteTime has changes, run this nonsense right here
            if(minutesTime != currentMinute){
              var hourRotation = 360/12; // c/hours
              var minuteRotation = 360/60; // c/minutes
              hourPos = (hourRotation * hoursTime) + ((hourRotation/60)*minutesTime); // gets hour hand position
              minutePos = minuteRotation * minutesTime; // gets minute hand position
    
              setTimePos(); // update the hands
              
              currentMinute = minutesTime; // update checker
            }
        }
        
        function setTimePos(){
            // adds rotate to hands
            hourEle.style.transform = "rotate("+hourPos+"deg)";
        minuteEle.style.transform = "rotate("+minutePos+"deg)";
    }
    }
};

function Clock(element, offset){
    this.element = document.getElementById(element);
    this.offset = offset;
}
    
var usClock =...