JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<script src="https://rawgit.com/ripplejs/waves/master/dist/waves.js"></script>
<script id="template" type="text/template">
  <div class="clock">
    <div class='left'>
      <p>Today is {{ time | day }} {{ time | month }} {{ time | date}}.<br>The time is:</p>
      <span class='time'>
        <span class='hours'>{{ time.getHours() | pad }}</span>:
        <span class='minutes'>{{ time.getMinutes() | pad }}</span>:
        <span class='seconds'>{{ time.getSeconds() | pad }}</span>
      </span>
    </div>

    <div class='right'>
      <div class='square'>
        <svg viewBox='0 0 100 100'>
          <g transform='translate(50,50)'>
            <circle class='clock-face' r='48'/>
            <g each="{{ minutes }}">
              <line class='major' y1='35' y2='45' transform='rotate( {{ 360 * $index / 60 }} )'/>
            </g>
            <g each="{{ hours }}">
              <line class='minor' y1='35' y2='45' transform='rotate( {{ 360 * $index / 12 }} )'/>
            </g>
            <line class='hour' y1='2' y2='-20' transform='rotate( {{ 30 * time.getHours() + time.getMinutes() / 2 }} )' />
            <line class='minute' y1='4' y2='-30' transform='rotate( {{ 6 * time.getMinutes() + time.getSeconds() / 10 }} )' />
            <g transform='rotate( {{ 6 * time.getSeconds() }} )'>
              <line class='second' y1='10' y2='-38'/>
              <line class='second-counterweight' y1='10' y2='2'/>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</script>

CSS

.left, .right {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.left {
    padding-right: 1em;
}
.left p {
    font-size: 1.4em;
}
.right {
    padding-left: 1em;
}
#example p {
    margin: 1em 0 0 0;
}
.time {
    font-family:'Voltaire';
    font-size: 3em;
    margin: 0;
}
.square {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.clock-face {
    stroke: #333;
    fill: white;
}
.minor {
    stroke: #999;
    stroke-width: 0.5;
}
.major {
    stroke: #333;
    stroke-width: 1;
}
.hour {
    stroke: #333;
}
.minute {
    stroke: #666;
}
.second, .second-counterweight {
    stroke: rgb(180, 0, 0);
}
.second-counterweight {
    stroke-width: 3;
}

JavaScript

var Clock = waves('#template');

// Hook for when the view is created. This fires
// before the view is rendered
Clock.created(function () {
    this.interval = setInterval(this.tick, 1000);
    this.data.time = new Date();
    this.data.minutes = new Array(60);
    this.data.hours = new Array(12);
});

// Add interpolation filters
Clock.filter({
    pad: function (num) {
        return String(num < 10 ? '0' + num : num);
    },
    date: function (val) {
        return val.getDate();
    },
    month: function (val) {
        var month = val.getMonth();
        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        return months[month];
    },    
    day: function (val) {
        var day = val.getDay();
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        return days[day];
    }
});

// Every second this will get called and
// update the current time
Clock.prototype.tick = function () {
    this.set('time', new Date());
};

// Create a new clock
var clock = new Clock();

// Append it
clock.appendTo('body');