I was recently asked if we could add a countdown timer to our Moodle install so that we could draw attention to upcoming events. I have done this in the past with Flash but wanted to see if I could do it with CSS3, HTML5 and JavaScript instead.

If you want to do it here is the code:

Create a HTML block on your Moodle course or front page and then click the cogs icon to configure the HTML block. You will want to put your HTML editor into code view and then you can copy and paste this code into your editor (watch out for any line breaks!):

 <div id="clockdiv" style="font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 20px;">
    <div style="padding: 8px; border-radius: 3px; background: #d27b7e; display: inline-block;">
        <span class="days" style="padding: 10px; border-radius: 3px; background: #A92C31; display: inline-block;"></span>
        <div class="smalltext" style="padding-top: 4px; font-size: 14px;">Days</div>
    </div>
    <div style="padding: 8px; border-radius: 3px; background: #d27b7e; display: inline-block;">
        <span class="hours" style="padding: 10px; border-radius: 3px; background: #A92C31; display: inline-block;"></span>
        <div class="smalltext" style="padding-top: 4px; font-size: 14px;">Hours</div>
    </div>
    <div style="padding: 8px; border-radius: 3px; background: #d27b7e; display: inline-block;">
        <span class="minutes" style="padding: 10px; border-radius: 3px; background: #A92C31; display: inline-block;"></span>
        <div class="smalltext" style="padding-top: 4px; font-size: 14px;">Minutes</div>
    </div>
    <div style="padding: 8px; border-radius: 3px; background: #d27b7e; display: inline-block;">
        <span class="seconds" style="padding: 10px; border-radius: 3px; background: #A92C31; display: inline-block;"></span>
        <div class="smalltext" style="padding-top: 4px; font-size: 14px;">Seconds</div>
    </div>
</div>
<script type="application/x-javascript">// <![CDATA[
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = 'March 8 2016 08:00:00 GMT+0000';
initializeClock('clockdiv', deadline);
// ]]></script>

The parts you will need to edit are the deadline variable at the end and any colours you may want to tweak too. The resulting countdown should look something like this: