JSFiddle - React, Tailwind, and code Playground

by Cory Danielson

HTML

<div id="clock"></div>

CSS

#clock {
    font-weight: bold;
    color: lime;
    display: inline-block;
    background-color: black;
    font-family: Courier;
    font-size: 20pt;
    padding: 20pt;
    text-align: center;
}

JavaScript

function getFormattedDate(format) {
    var date = new Date(Date.now()),
        formattedDate;

    formattedDate = date.getFullYear() + "-"
                  + handleSingleDigit(date.getMonth()+1) + "-"
                  + handleSingleDigit(date.getDate()) + " "
                  + handleSingleDigit(handleHours(date.getHours())) + ":"
                  + handleSingleDigit(date.getMinutes()) + ":"
                  + handleSingleDigit(date.getSeconds()) + " "
                  + (date.getHours() < 12 ? "AM" : "PM");

    return formattedDate;
}

// Prepends 0 to a single digit number.
function handleSingleDigit(num) {
    return (( num.toString().length === 1 ) ? "0" + num : num);
}

// Accepts an hour 0-23, returns 1-12
function handleHours(hours) {
    hours = (hours > 12 ? hours-12 : hours);
    if ( hours.toString() === "0" ) hours = "12";
    return hours;
}

function updateClock() {
    document.getElementById('clock').innerHTML = getFormattedDate();
}

updateClock();
setInterval(updateClock, 1000);