JSFiddle - React, Tailwind, and code Playground

by knrm720

HTML

<script src="https://rpominov.github.io/kefir/dist/kefir.js"></script>
<div class="clock">
    <div class="seconds"></div>
    <div class="minutes"></div>
    <div class="hours"></div>
</div>

CSS

.clock {
    width: 201px;
    height: 201px;
    border-radius: 80%;
    border: solid 1px #000;
    position: relative;
}
.hours,
.minutes,
.seconds {
    position: absolute;
    left: 100px;
    bottom: 100px;
    width: 1px;
}
.hours {
    height: 65px;
    border: solid 2px #000;
    margin-left: -2px;
    margin-bottom: -4px;
    background: #000;
    -webkit-transform-origin: 2.5px 65px;
            transform-origin: 2.5px 65px;
}
.minutes {
    height: 80px;
    border: solid 1px #aaa;
    margin-left: -1px;
    margin-bottom: -5px;
    background: #aaa;
    -webkit-transform-origin: 1.5px 76px;
            transform-origin: 1.5px 76px;
}
.seconds {
    height: 95px;
    background: red;
    margin-bottom: -7px;
    -webkit-transform-origin: 0.5px 88px;
            transform-origin: 0.5px 88px;
}

JavaScript

// Base time Property

function getTime() {
    return Date.now();
}

var curTime = Kefir
    .fromPoll(500, getTime)
    .toProperty(getTime);


// Arrows angle Property

function timeToAngles(timestamp) {
    var date = new Date(timestamp);
    var seconds = date.getSeconds();
    var minutes =  date.getMinutes() + seconds / 60;
    var hours = date.getHours() + minutes / 60;
    return {
        seconds: 360 * seconds / 60,
        minutes: 360 * minutes / 60,
        hours: 360 * hours / 12,
    };
}

var angles = curTime.map(timeToAngles);



// Side effects

$seconds = $('.seconds');
$minutes = $('.minutes');
$hours = $('.hours');

function rotateStr(angle) {
    return 'rotate(' + angle + 'deg)';
}

angles.onValue(function(a) {
    $seconds.css('transform', rotateStr(a.seconds));
    $minutes.css('transform', rotateStr(a.minutes));
    $hours.css('transform', rotateStr(a.hours));
});