JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<!-- "fixing" http://xkcd.com/1340 by Rodrigo Hausen -->
<div class="xkcdcanvas" title="If our current civilization lasts another 8,000 years, it&#39;s probably fair to assume the Long Now Foundation got things right, and at some point we started listening to them and switched to five-digit years.">
    <div id="xkcddate">2014-03-10!</div>
</div>

CSS

div#xkcddate {
    color: #111;
    text-shadow: 0px 0px 2px #ddd;
    position: relative;
    top: 30px;
    text-align: center;
    font-size: 16px;
    font-family: xkcdregular, Sans;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
/* image from http://xkcd.com/1340
 * converted to base64 with
 * http://webcodertools.com/imagetobase64converter
 */
 div.xkcdcanvas {
    width: 184px;
    height: 333px;
    background-image:...

JavaScript

function pad(value) {
    if (value == 0) {
        return "00";
    } else if (value < 10) {
        return "0" + value;
    } else {
        return value;
    }
}

function update_time_and_date() {
    var d = new Date();
    var str = d.getFullYear() + "-" + pad(d.getMonth()+1) + "-" +
              pad(d.getDate()) + " " + pad(d.getHours()) + ":" +
              pad(d.getMinutes()) + ":" + pad(d.getSeconds()) + "!";
    document.getElementById("xkcddate").innerHTML = str;
}

setInterval(update_time_and_date, 1000);