JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<div class="content">

  <div id="aclock">
    <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/secondHand.png?raw=true" id="secondhand">
    <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/minuteHand.png?raw=true" id="minutehand">
    <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/hourHand.png?raw=true" id="hourhand">
  </div>

</div>

CSS

/*-------------------------
	Simple reset
--------------------------*/

*{
	margin:0;
	padding:0;
}

body {
  background: #E3E7E8;
}
/*-------------------------
	General Styles
--------------------------*/

html{
	overflow:hidden;
}

body {
	font-size: 46px;
	font-family: courier;
}


.content {
    
}

#aclock {
	position: relative;
	width: 100%;            
    height: 378px;       
    background-repeat:no-repeat;
    background-size:contain;
	background-image: url('https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/clockFace.png?raw=true');
}

#secondhand {
	position: absolute;
	top:58px;
	left: 181px;
	/* Transform Origin */
	-webkit-transform-origin: 50% 95%;
	-moz-transform-origin: 50% 95%;
	transform-origin: 50% 95%;
	z-index: 1000;
}

#minutehand, #hourhand {
	position: absolute;
	/* Transform Origin */
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	z-index: 0;
}

#minutehand {
	/*top:50px;*/
	top: 74px;
	left: 187px;
}

#hourhand {
	top:90px;
  left:187px;
}

JavaScript

$(function(){
	updateTime();
});


function updateTime() {

	// Get time from moment.js with specified format
	var now = moment().format("hhmmssdA");
	
	// Move the clock hands
	rotateHands(now[4]+now[5],now[2] + now[3],now[0] + now[1]);
	setTimeout(updateTime, 1000);
}

function rotateHands(sec,min,hour) {
  var degSec = 360/60*sec;
	var degMin = 360/60*min;
	var degHour = 360/12*hour;

	var sHand = $('#secondhand');
	sHand.css({
        "-webkit-transform": "rotate(" + degSec + "deg)",
        "-moz-transform": "rotate(" + degSec + "deg)",
        "transform": "rotate(" + degSec + "deg)" 
    });

	var mHand = $('#minutehand');
	mHand.css({
        "-webkit-transform": "rotate(" + degMin + "deg)",
        "-moz-transform": "rotate(" + degMin + "deg)",
        "transform": "rotate(" + degMin + "deg)"
    });

	var hHand = $('#hourhand');
	hHand.css({
        "-webkit-transform": "rotate(" + degHour + "deg)",
        "-moz-transform": "rotate(" + degHour + "deg)",
        "transform": "rotate(" + degHour + "deg)" 
    });
}