JSFiddle - React, Tailwind, and code Playground

by anthonyshort

HTML

<script src="https://gist.githack.com/anthonyshort/11051081/raw/ba370e5f11830ab0e53468bd24a633765369b3c3/build.js"></script>
<script type="text/template" id="template">
<div class='left'>
  <p>
    Today is {{ time | day }} the {{ time | date }} of {{ time | month }}. 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="{{ Array(60) }}">
          <line class='major' y1='35' y2='45' transform='rotate( {{ 360 * $index / 60 }} )'/>
        </g>
        <g each="{{ Array(12) ">
          <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>
</script>
<script>
    var clock = new Clock();
    clock.appendTo('body');
</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: 4em;
  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 ripple = require('ripple');
var each = require('each');
var bind = require('bind-methods');
var intervals = require('intervals');

// Create a view using the pages HTML as a template
var Clock = ripple('#template')
  .use(each)
  .use(intervals);

// Set the initial state of the view
// This is triggered before rendering
Clock.parse(function(options){
  return {
    time: new Date()
  };
});

// Hook for when the view is created. This fires
// before the view is rendered
Clock.on('created', function(clock){
  clock.setInterval(clock.tick, 1000);
});

// Add interpolation filters
Clock.filter({
  pad: function(num){
    return String( num < 10 ? '0' + num : num );
  },
  suffixedDate: function(val){
    return suffix(val);
  },
  fullMonth: function(val){
    return month(val).full();
  },
  fullDay: function(){
    return day(val).full();
  }
});

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