JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<div id="container">
    <canvas class="countdown" id="day"></canvas>
    <canvas class="countdown" id="hour"></canvas>
    <canvas class="countdown" id="minute"></canvas>
    <canvas class="countdown" id="second"></canvas>
</div>

CSS

canvas.countdown {
    margin:10px;
    border-radius:50%;
    /*background-color:#fff;*/
}
#container {
    background-color:#dedede;
}

JavaScript

(function () {
    AZCountDown({

        // End date
        endDay: 1,
        endMonth: 6,
        endYear: 2013,
        endHour: 0,
        endMinute: 0,
        endSecond: 0,

        // Arc
        arcColor: '#a72244',
        arcWidth: 20,

        // Circle
        circleColor: '#faa61a',

        // Number
        numberColor: '#fff',
        numberSize: '32px',
        numberFont: '"Open Sans"',
        
        // Text
        textColor: '#a72244',
        textSize: '32px',
        textFont: '"Open Sans"',

        // Canvas size
        canvasSize: 200
    });
})();

function AZCountDown(settings) {

    // Needed if you intend to use webfonts
    var loadFont = function (url, callback) {
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        document.getElementsByTagName('head')[0].appendChild(link);
        // Hack to make it force load the font
        var img = document.createElement('img');
        img.onerror = function () {
            if (callback) callback(link);
        };
        img.src = url;
    };

    // Calculate and set settings
    settings.radius = settings.canvasSize / 2;
    settings.xyOrigin = settings.radius;
    settings.arcRadius = settings.radius * 9 / 10;
    settings.endDate = new Date(
        settings.endYear,
        settings.endMonth - 1,
        settings.endDay,
        settings.endHour,
        settings.endMinute,
        settings.endSecond);
    console.log(settings.endDate);

    // RequestAnimationFrame with setTimeout fallback
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    // Pluralizes time unit display if needed
    var timeUnit = function (time, unit) {
        return (time !== 1) ? unit + "s" : unit;
 ...