JSFiddle - React, Tailwind, and code Playground

Circular Countdown

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="wrapper">

    <h1>This website is under construction!</h1>
    <h4>We will be live in:</h4>

    <div class="clock">
        <!-- Days -->
        <div class="clock_days">
            <div class="bgLayer">
                <canvas id="canvas_days" width="122" height="122">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
                <p class="val">0</p>
                <p class="type_days">Days</p>
            </div>
        </div>
        <!-- Days -->
        <!-- Hours -->
        <div class="clock_hours">
            <div class="bgLayer">
                <canvas id="canvas_hours" width="122" height="122">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>

                <p class="val">0</p>
                <p class="type_hours">Hours</p>
            </div>
        </div>
        <!-- Hours -->
        <!-- Minutes -->
        <div class="clock_minutes">
            <div class="bgLayer">
                <canvas id="canvas_minutes" width="122" height="122">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
                <div class="text">
                    <p class="val">0</p>
                    <p class="type_minutes">Minutes</p>
                </div>
            </div>
        </div>
        <!-- Minutes -->
        <!-- Seconds -->
        <div class="clock_seconds">
            <div class="bgLayer">
                <canvas id="canvas_seconds" width="122" height="122">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
                <p class="val">0</p>
                <p class="type_seconds">Seconds</p>
            </div>
        </div>
        <!-- Seconds -->
   ...

CSS

body {
    margin:0px;
    padding:0px;
    background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}

.wrapper {
    width:600px;
    margin:100px auto;
}

h1, h4 {
    font-family: 'Yanone Kaffeesatz';
    text-transform: uppercase;
    text-align: center;
    font-weight: normal;
    text-shadow: 1px 1px 1px #111;
       
}
h1 {
    color: rgba(191,76,36,0.7);
    font-size:50px;
}

h4 {
    color: rgba(243,181,43,0.7);
    font-size:24px;
    margin:10px 0 20px 0;
}
h1:hover, h4:hover {
    color: rgba(255,255,255,0.3);
}

.clock {
    width:535px;
    margin:0 auto;
}

.clock_days {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_hours {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_minutes {
    float:left;
    width:122px;
    margin-right: 15px;
    position: relative;
}
.clock_seconds {
    float:left;
    width:122px;
    position: relative;
}

.bgLayer {
    width:122px;
    height:122px;
    background-repeat: no-repeat;
}

.val {
    margin:0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height: 122px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 35px;
    color:#f3b52b;
    font-weight: bold;
    text-shadow: 1px 1px 1px #111;
    text-align: center;
}

.type_days,
.type_hours,
.type_minutes,
.type_seconds {
    font-family: 'Yanone Kaffeesatz';
    font-size: 16px;
    color:#f3b52b;
    padding:5px;
    text-align: center;
    margin:0 auto;
    margin-top:10px;
    display: table;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #222;
}

JavaScript

$(document).ready(function(){
    JBCountDown({
        secondsColor : "#bf4c24",
        secondsGlow  : "none",
        
        minutesColor : "#bf4c24",
        minutesGlow  : "none",
        
        hoursColor   : "#bf4c24",
        hoursGlow    : "none",
        
        daysColor    : "#bf4c24",
        daysGlow     : "none",
        
        startDate   : "1345021200",
        endDate     : "1352973600",
        now         : "1348828355",
        seconds     : "35"
    });
});

function JBCountDown(settings) {
    var glob = settings;

    function deg(deg) {
        return (Math.PI / 180) * deg - (Math.PI / 180) * 90
    }

    glob.total = Math.floor((glob.endDate - glob.startDate) / 86400);
    glob.days = Math.floor((glob.endDate - glob.now) / 86400);
    glob.hours = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
    glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60);

    if (glob.now >= glob.endDate) {
        return;
    }

    var clock = {
        set: {
            days: function() {
                var cdays = $("#canvas_days").get(0);
                var ctx = cdays.getContext("2d");
                ctx.clearRect(0, 0, cdays.width, cdays.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.daysColor;

                ctx.shadowBlur = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.daysGlow;

                ctx.arc(61, 61, 50, deg(0), deg((360 / glob.total) * (glob.total - glob.days)));
                ctx.lineWidth = 22;
                ctx.stroke();
                $(".clock_days .val").text(glob.days);
            },

            hours: function() {
                var cHr = $("#canvas_hours").get(0);
                var ctx = cHr.getContext("2d");
                ctx.clearRect(0, 0, cHr.width, cHr.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.hoursColor;

    ...