JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:700' rel='stylesheet' type='text/css'>
<div id="countdown">10</div>

CSS

body {
    font-family: 'Droid Sans';
}

#countdown {
    color: orange;
    font-size: 48px;
    text-shadow: 3px 3px 3px #000;
}

@-webkit-keyframes pulse {
 from {
    color: orange;
 }
 to {
    color: red;
 }
}

.pulsate {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

JavaScript

var playBeep = (function () {
    var beep = new Audio('http://downloads.flashkit.com/soundfx/Electronic/Arcade/Arcade_S-wwwbeat-8531/Arcade_S-wwwbeat-8531_hifi.mp3');
    return function () {
        beep.play();
    };
}());

setInterval(function () {
    var $div = $('#countdown'),
        n = parseInt($div.text(), 10);
    
    if (n > 0) {
        $div.text(--n);
        if (n <= 5) {
            if ($div.not('.pulsate')) {
                $div.addClass('pulsate');
            }
            playBeep();
        }
    }   
}, 1010);