React.js Countdown Ticker

by Mark Allen

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var prettyTime = function (seconds) {
    // todo
    return seconds.toString();
}

var futureSeconds = function (futureTime) {
    var now = new Date();
    return parseInt((futureTime.getTime() - now.getTime()) / 1000);
}

var DiscountTicker = React.createClass({
    render: function () {
        return (
            <div>
                You have {prettyTime(this.props.remainingSeconds)} left to get {this.props.percentage}% off. <a href="/whatever">Click here</a>.
            </div>);
    }
});

var expiresAt = new Date(new Date().getTime() + (15 * 60 * 1000));

var render = function () {
    var remainingSeconds = futureSeconds(expiresAt);
    var ticker = (<DiscountTicker remainingSeconds={remainingSeconds}
                                 percentage="20"/>);
    React.render(ticker, document.body);
};
render();
setInterval(render, 1000);