JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="toolbar">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li id="time"></li>
    </ul>
</div>

CSS

#toolbar {
    background: #222;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #333),
        color-stop(0.49, #292929),
        color-stop(0.5, #262626),
        color-stop(1, #181818));
    border: 1px solid #161616;
    border-radius: 5px;
    margin: 0 auto;
    width: 400px;
}
 
#toolbar ul {
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #333;
    border-radius: 5px;
    height: 32px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
#toolbar ul li {
    color: #fff;
    float: left;
    font-family: sans-serif;
    height: 18px;
}

#toolbar ul li#time {
    font-size: 18px;
    font-weight: bold;
    margin: 4px 8px;
    padding: 2px 4px;
}
.negative #toolbar ul li#time {
    background: #fff;
    border: 1px solid #111;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
    color: #222;
}

#time #meridiem {
    color: #aaa;
    font-size: 11px;
    margin-left: 2px;
    text-transform: uppercase;
}

JavaScript

function Clock() {
    var domClock = document.getElementById('time'),
        self = this;
    
    this.settings = {'twelve_hour' : false};
    
    function getFormattedTime(hour, minutes) {
        minutes = minutes < 10 ? ('0' + minutes) : minutes;
        
        if (self.settings.twelve_hour) {
            hour = hour > 12 ? (hour - 12) : hour;
        }
        else {
            hour = hour < 10 ? ('0' + hour) : hour;
        }
        return hour + ':' + minutes;
    }
    
    this.updateTime = function() {
        var d = new Date(),
            hour = d.getHours(),
            minutes = d.getMinutes(),
            meridiem = (hour > 12) ? "pm" : "am",
            span,
            clock_text = getFormattedTime(hour, minutes),
            interval = (60 - d.getSeconds()) * 1000;

        if (!domClock) {
            return;
        }
        
        if (domClock.firstChild) {
            domClock.firstChild.nodeValue = clock_text;
        }
        else {
            domClock.appendChild(document.createTextNode(clock_text));
        }
        
        if (self.settings.twelve_hour) {
            span = domClock.getElementById('meridiem');
            if (span && span.firstChild) {
                span.firstChild.nodeValue = meridiem;
            }
            else {
                span = document.createElement('span');
                span.setAttribute('id', 'meridiem');
                span.appendChild(document.createTextNode(meridiem));
                domClock.appendChild(span);
            }
        }
        
        setTimeout(self.updateTime, interval);
    };

}

var myClock = new Clock();
myClock.settings.twelve_hour = true;
myClock.updateTime(true);