Till 10/10/2014: days, : :
Till 10/1/2014 13:00:12: days, : :
Till midnight: days,::

Watch other stuff based on Mod.

Introduction

This is no-jQuery counter based on dfcreative's mod.

How to use

Download source code on github and include it into your html file.
Before DOM: 
<link rel="stylesheet" type="text/css" href="counterStyle.css">
 After DOM (include counterStyle.css if you want it to look like first one on this page): 
<script src="mod.min.js" type="text/javascript"></script>
<script src="counter.js" type="text/javascript"></script>
 Counter is fully customizable from outside. Just follow simple layout and don't forget to set two nubmers for minutes, hours and seconds and three numbers for days event if you don't have days at all.
Date can be set in parsable format(american data format- month goes first) or using keyword "midnight". 
<div class="counter" date="10/1/2014 13:00:12">
    <span>Till my birthday party!</span>
    <ul class="days">
        <li class="digit"></li>
        <li class="digit"></li>
        <li class="digit"></li>
    </ul>
    <span class="days">days,</span>
    <ul class="hours">
        <li class="digit"></li>
        <li class="digit"></li>
    </ul>
    <span class="divider hours">:</span>
    <ul class="minutes">
        <li class="digit"></li>
        <li class="digit"></li>
    </ul>
    <span class="divider minutes">:</span>
    <ul class="seconds">
        <li class="digit"></li>
        <li class="digit"></li>
    </ul>
</div>

Usecases

This counter is now sucsessfully being used on kudago.com for all oncoming events and contests. For example.
It's quite comfortable to use this component in template-based projects (like Django, Jinja an so on).
Big plus is the fact that counter is fully customizable from outside HTML, plugin just collects information with querySelectors by classes.