JSFiddle - React, Tailwind, and code Playground

Word Clock... again.

by Jennifer Perrin

HTML

<div id="progressbar"></div>
<div id="clock">	<span class="word on">It</span>
	<span class="word nbsp"></span>
	<span class="word on">is</span>
	<span class="word nbsp"></span>
	<span class="word" id="m_20">twenty</span>

    <br />	<span class="word" id="m_15">quarter</span>
	<span class="word nbsp"></span>
	<span class="word" id="m_30">half</span>

    <br />	<span class="word" id="m_10">ten</span>
	<span class="word" id="m_5">five</span>
	<span class="word nbsp"></span>
	<span class="word" id="past">past</span>

    <br />	<span class="word" id="to">to</span>
	<span class="word nbsp"></span>
	<span class="word" id="h_0">twelve</span>
	<span class="word" id="h_1">one</span>

    <br />	<span class="word" id="h_2">two</span>
	<span class="word" id="h_3">three</span>
	<span class="word" id="h_4">four</span>

    <br />	<span class="word" id="h_5">five</span>
	<span class="word" id="h_6">six</span>
	<span class="word" id="h_7">seven</span>

    <br />	<span class="word" id="h_8">eight</span>
	<span class="word" id="h_9">nine</span>
	<span class="word" id="h_10">ten</span>

    <br />	<span class="word nbsp"></span>
	<span class="word nbsp"></span>
	<span class="word nbsp"></span>
	<span class="word" id="h_11">eleven</span>
	<span class="word nbsp"></span>
	<span class="word nbsp"></span>
	<span class="word nbsp"></span>

    <br />	<span class="word nbsp"></span>
	<span class="word" id="m_0">O'Clock</span>
	<span class="word nbsp"></span>
	<span class="word on">now</span>

</div>

CSS

html {
    text-align: center;
    background: black;
    font-size: 25px;
}
#progressbar {
    width: 100%;
    height: 2px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    box-shadow: 1px 2px 3px red;
}
#clock {
    text-align: left;
    display: inline-block;
    padding: 2em;
    margin: 3em;
    background: #222;
    color: grey;
    border: 1px solid #333;
    border-radius: .5em;
    font-family:'Courier New', monospace;
    word-spacing: -1.1em;
    letter-spacing: .5em;
    white-space: nowrap;
}
#clock > .word {
    text-transform: uppercase;
    font-size: 2em;
    word-spacing: 0em;
    opacity: .1;
    transition: all 3s;
}
#clock > .word.on {
    opacity: 1;
    color: #0af;
    text-shadow: 0 0 5px #6bf;
}

JavaScript

var hours, minutes, to, past, nbsps;
var progress;
var chars = 'abcdefghijklmnopqrstuvwxyz';

var changed = function () {
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var offset;
    var next;

    hour = hour % 12;
    minute = minute - minute % 5;

    for (var i in minutes) {
        minutes[i].removeClass('on');
    }
    for (var i in hours) {
        hours[i].removeClass('on');
    }

    to.removeClass('on');
    past.removeClass('on');


    if (minute > 30) {
        hours[(hour + 1) % 12].addClass('on');
        to.addClass('on');

    } else {
        hours[hour].addClass('on');
        if (minute !== 0) {
            past.addClass('on');
        }
    }

    offset = (minute > 30) ? (60 - minute) : minute;

    if (offset in minutes) {
        minutes[offset].addClass('on');
    } else if (offset === 25) {
        minutes[20].addClass('on');
        minutes[5].addClass('on');
    }

    now.setTime(Date.now());
    next = new Date(now.getTime());
    next.setMinutes(minute + 5);
    next.setSeconds(0);
    next.setMilliseconds(0);
    console.log((next - now) / 1000);
    setTimeout(changed, next - now);

}

var adjustProgress = function () {
    var now = new Date();
    var passed = (now.getMinutes() % 5) * 60 + now.getSeconds();
    var percent = passed / (5 * 60) * 100;

    progress.width(percent + '%')
        .css('transition', 'width 1s linear');

    if (percent < .5) {
        progress.hide();
        setTimeout(function () {
            progress.fadeIn();
        }, 500);
    }

    setTimeout(adjustProgress, 1000);
};

var first = function () {
    nbsps.each(function () {
        var c = chars.charAt(Math.floor(Math.random() * chars.length));
        $(this).text(c);
    });

    setTimeout(function () {
        progress.fadeIn();
    }, 1000);
};

$(function () {
    minutes = {
        0: $('#clock #m_0'),
        5: $('#clock #m_5'),
        10: $('#clock #m_10'),
        15: $('#clock...