JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<body>
    <div id="time-info">Current Time: <span id="hours"></span>:<span id="minutes"></span></span>:<span id="seconds"></span>:<span id="milliseconds">
    </div>
    
    <div id="calc-time-info">Calculated Time:<br />
        h:<span id="hours-calc"></span><br />
        m:<span id="seconds-calc"></span><br />
        s:<span id="minutes-calc"></span><br />
        better: <span id="better-seconds"></span>
    </div>
    
    
    
    <div id="clock">
        <svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
            <circle id="minute" fill="#83D6FF" cx="529.894" cy="597" r="10" />
            <circle id="hour" fill="#C6EFB4" cx="530" cy="200.106" r="10" />
            <circle id="second" fill="#F2E983" cx="530.002" cy="478.108" r="10.598" />
        </svg>
    </div>

CSS

#time-info, #calc-time-info {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 14px;
}
#time-info span, #calc-time-info span
{
    color: gray;
}
#clock {
    max-width: 900px;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JavaScript

var minuteR = 0; // this is radius of cirle
var hourR = 0; // this is radius of cirle
var secondR = 10; // this is radius of cirle


function expansion() {
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");

    hourR = hourR + 2; // Make the circle expand
    minuteR = minuteR + 2; // Make the circle expand

    var minuteCx = minute.getAttribute('cx');
    var minuteCy = minute.getAttribute('cy');

    var theTime = new Date();
    secondR = theTime.getSeconds() * 6 + theTime.getMilliseconds() / 1000 * 6;


    minuteR = theTime.getSeconds() * 6 + theTime.getMilliseconds() / 1000 * 6;
    hourR = theTime.getMinutes() / 59 * 100;

    hour.setAttribute('r', hourR);
    minute.setAttribute('r', minuteR);
    second.setAttribute('transform', 'rotate(' + secondR + ',' + minuteCx + ',' + minuteCy + ')');

    // From Evan

    //
    // display the current time in HTML so we can see it:
    var hoursSpan = document.getElementById("hours");
    var minutesSpan = document.getElementById("minutes");
    var secondsSpan = document.getElementById("seconds");
    var millisecondsSpan = document.getElementById("milliseconds");

    hoursSpan.innerHTML = theTime.getHours();
    minutesSpan.innerHTML = theTime.getMinutes();
    secondsSpan.innerHTML = theTime.getSeconds();
    millisecondsSpan.innerHTML = theTime.getMilliseconds();
    
    //
    // display the *calculated* time in HTML so we can see it:
    var hoursCalcSpan = document.getElementById("hours-calc");
    var minutesCalcSpan = document.getElementById("minutes-calc");
    var secondsCalcSpan = document.getElementById("seconds-calc");

    hoursCalcSpan.innerHTML = hourR;
    minutesCalcSpan.innerHTML = minuteR;
    secondsCalcSpan.innerHTML = secondR;

    // why so high?
    //
    // theTime.getSeconds() gives a value from 0-59 (60 seconds in a minute)
    // theTime.getMilliseconds() gives a value from 0-999...