JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script src="http://countdownjs.org/countdown.min.js"></script>
<div id="container">
    <canvas class="countdown" id="days"></canvas>
    <canvas class="countdown" id="hours"></canvas>
    <canvas class="countdown" id="minutes"></canvas>
    <canvas class="countdown" id="seconds"></canvas>
</div>

CSS

canvas.countdown {
    margin:10px;
    border-radius:50%;
    border font-family:'Open Sans', sans-serif;
    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 Colors
        daysColor: '#a72244',
        hoursColor: '#a72244',
        minutesColor: '#a72244',
        secondsColor: '#a72244',

        //Arc With
        arcWidth: 20,

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


function AZCountDown(settings) {
    // Pluralizes time unit display if needed
    var timeUnit = function (time, unit) {
        return (time !== 1) ? unit + "s" : unit;
    };
    // Converts numeric degrees to radians
    var toRad = function (deg) {
        return deg * Math.PI / 180;
    };
    // Reads the settings and creates a global
    var glob = settings;
    glob.radius = glob.canvasSize / 2;
    glob.xyOrigin = glob.radius;
    glob.arcRadius = glob.radius * 9 / 10;
    glob.endDate = new Date(glob.endYear, glob.endMonth - 1, glob.endDay, glob.endHour, glob.endMinute, glob.endSecond);

    var time = {
        days: '',
        hours: '',
        minutes: '',
        seconds: ''
    };

    var endTime = function () {
        var timeDiff = glob.endDate - new Date() | 0;
        time.days = timeDiff / 86e6 | 0;
        time.hours = timeDiff % 86e6 / 3.6e6 | 0;
        time.minutes = timeDiff % 3.6e6 / 6e4 | 0;
        time.seconds = timeDiff % 6e4 / 1e3 | 0;
        return time;
    };

    var arcBuilder = function (canvasId, endTime, clockDivider) {
        var canvas = window.document.getElementById(canvasId);
        var ctx = canvas.getContext("2d");
        canvas.width = canvas.height = glob.canvasSize;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.strokeStyle = glob.secondsColor;
        ctx.arc(glob.xyOrigin, glob.xyOrigin, glob.arcRadius, toRad(-90), (toRad(-90) - toRad(360)) + toRad(360) * endTime / clockDivider, true);
        ctx.lineWidth = glob.arcWidth;
      ...