JSFiddle - React, Tailwind, and code Playground

by mrrodd

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://datejs.googlecode.com/files/date.js"></script>
<div id="timer" class="group">
  <div class="date" data-bind="dateString: today, datePattern: 'dddd, MMMM dd, yyyy'">Thursday, April 05, 2012</div>
  <div class="total">
    <span class="minutes" data-bind="text: totalMinutes">0</span>.<span class="seconds" data-bind="text: totalSeconds">00</span>
</div>

CSS

#timer {background-color: #d1d1d1; padding: 10px; }
#timer>div.total {
    float: right;
    font-weight: bold;
}
#timer>div.date { 
    float: left;
    line-height: 1.75em;
}

.minutes { font-size: 1.75em; }
.seconds { font-size: 1em; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1;}

JavaScript

ko.bindingHandlers.dateString = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        var pattern = allBindings.datePattern || 'MM/dd/yyyy';
        $(element).text(valueUnwrapped.toString(pattern));
    }
}

var viewModel = new ViewModel();
viewModel.today(new Date());
viewModel.totalTime(0);
ko.applyBindings(viewModel);

setInterval(function() {
    viewModel.totalTime(viewModel.totalTime() + 1);
}, 1000);

function ViewModel() {
    var self = this;

    self.today = ko.observable();
    self.totalTime = ko.observable();
    self.totalDays = ko.computed(function() {
        return Math.floor(self.totalTime() / 86400);
    });
    self.totalHours = ko.computed(function() {
        return Math.floor((self.totalTime() - (self.totalDays() * 86400)) / 3600);
    });
    self.totalMinutes = ko.computed(function() {
        return Math.floor((self.totalTime() - (self.totalDays() * 86400) - (self.totalHours() * 3600)) / 60);
    });
    self.totalSeconds = ko.computed(function() {
        return pad(Math.floor((self.totalTime() - (self.totalDays() * 86400) - (self.totalHours() * 3600) - (self.totalMinutes() * 60))), 2);
    });
}

function pad(num, size) {
    var s = num + "";
    while (s.length < size) s = "0" + s;
    return s;
}