JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="clock">
    <div id="hand_hour">
        <div id="hand_hour_line"></div>
    </div>
    <div id="hand_minute">
        <div id="hand_minute_line"></div>
    </div>
    <div id="hand_second">
        <div id="hand_second_line"></div>
    </div>
</div>

CSS

body {
    font-family: monospace;
}

#clock {
    position: relative;
    width: 200px;
    height: 200px;
    border: 3px solid #AAA;
    border-radius: 50%;
    margin: 10px auto;
}
#hand_hour, #hand_minute, #hand_second {
    position: absolute;
    left: 0px;
    top: 100px;
    width: 200px;
}
#hand_hour_line {
    position: absolute;
    right: 40px;
    width: 60px;
    border-top: 3px solid #000;
}
#hand_minute_line {
    position: absolute;
    right: 20px;
    width: 80px;
    border-top: 3px solid #000;
}
#hand_second_line {
    position: absolute;
    right: 18px;
    width: 82px;
    border-top: 1px solid #000;
}

.hour_marking {
    position: absolute;
    left: 0px;
    top: 100px;
    width: 200px;
}
.hour_marking_line {
    position: absolute;
    right: 0px;
    width: 10px;
    border-top: 3px solid #000;
}

JavaScript

// 12 hour clock

// make the number markings
function make_markings(num_of_markings) {
    var i, len, html = '', increment_by = 360 / num_of_markings;
    
    for (i = 0, len = num_of_markings; i < len; i += 1) {
        html += '<div class="hour_marking" style="' + 
        'transform: rotate(' + ((i * increment_by) - 60) + 'deg);' +
        '-o-transform: rotate(' + ((i * increment_by) - 60) + 'deg);' +
        '-moz-transform: rotate(' + ((i * increment_by) - 60) + 'deg);' +
        '-webkit-transform: rotate(' + ((i * increment_by) - 60) + 'deg);' + '">' +
                '    <div class="hour_marking_line">' + (i + 1) + '</div>' +
                '</div>';
    }
    $('#clock').append(html);
}

// return decimal for a 12 hour clock
function time_to_decimal(time) {
    return (time.getHours() +
            time.getMinutes()/60 +
            time.getSeconds()/3600);
}

// turn a decimal into degrees for hour hand
function decimaltime_to_degrees_hour(time) {
    var degrees = (time > 12 ? time - 12 : time) * 30;
    return (degrees > 360 ? degrees - 360 : degrees);
}

// turn a decimal into degrees for minute hand
function decimaltime_to_degrees_minute(time) {
    var degrees = (time - Math.floor(time)) * 360;
    return (degrees > 360 ? degrees - 360 : degrees);
}

// turn a decimal into degrees for second hand
function decimaltime_to_degrees_second(time) {
    var degrees;
    
    degrees = time * 6;
    return (degrees > 360 ? degrees - 360 : degrees);
}

function refresh_time() {
    var current_date = new Date(),
        decimal_time = time_to_decimal(current_date),
        hour_degrees, minute_degrees, second_degrees;
    console.log(decimal_time, current_date.getSeconds());
    hour_degrees = decimaltime_to_degrees_hour(decimal_time) - 90;
    
    minute_degrees = decimaltime_to_degrees_minute(decimal_time) - 90;
    
    second_degrees = decimaltime_to_degrees_second(current_date.getSeconds()) - 90;
    
    $('#hand_hour').css({
       ...