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>
<img src

CSS

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

JavaScript

(function () {
    AZCountDown({

        // End date
        endDay: 1,
        endMonth: 5,
        endYear: 2013,

        endHour: 0,
        endMinute: 0,
        endSecond: 0,

        // Arc
        daysColor: '#a72244',
        hoursColor: '#a72244',
        minutesColor: '#a72244',
        secondsColor: '#a72244',
        arcWidth: 20,

        // Number + Text
        numberColor: '#fff',
        numberSize: '32px',
        numberFont: '"Open Sans"',
        
        textColor:'#a72244',
        textSize: '32px',
        textFont: '"Open Sans"',
             
        // Canvas size
        canvasSize: 200
    });
})();


function AZCountDown(settings) {
       
    var loadCSS = function(url, callback){
    var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;

    document.getElementsByTagName('head')[0].appendChild(link);

    var img = document.createElement('img');
        img.onerror = function(){
            (callback) ? callback(link) : alert('style sheet loaded!');
        }
        img.src = url;
}
    
 
    
     // Reads the settings and creates a settingsal
    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);
    
    
    // requestAnimationFrame
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    // Pluralizes time...