JSFiddle - React, Tailwind, and code Playground

by jchasinga

HTML

<div>
    <counter></counter>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
<style>
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #eee; margin: 0; padding: 25px; }

JavaScript

class CountStore {
  constructor() {
    return (mod, msgs) => {
      this.model = mod;
      this.messages = msgs;
      return this;
    }
  }
}

function CountController ($element, CountStore) {
  let model = 4;
  let messages = { 
  		Inc: (model => parseInt(model) + 1)
    , Dec: (model => parseInt(model) - 1)
	  , Set: (model, event) => {
    		if (/[0-9]/.test(event.key)) 
        	return $element.find("input").val();
				if (event.keyCode === 8 || 9 || 13 || 16) 
        	return model;
      }
    , Attach: (model) => {
    		let inputEl = $element.find("input").val(model);
    		return inputEl.val();
      }
  };
  
  this.store = CountStore(model, messages);
  this.update = (message, model, ...args) => {
    if (message in this.store.messages) {
      let newModel = this.store.messages[message](model, ...args);
      this.store.model = newModel;
    }
    return this;
  }
}

let Counter = {
    controller: CountController,
    // Need some refinement on keyboard events
    template: `
      <div class="todo">
      	<p>{{$ctrl.store.model || 0}}</p>
        <input type="text"
        			 value="{{$ctrl.store.model}}"
               ng-keyup="$ctrl.update('Set', $ctrl.store.model, $event)">
        <button type="button" 
                ng-click="$ctrl
                           .update('Dec', $ctrl.store.model)
                           .update('Attach', $ctrl.store.model)">
          -
        </button>
        <button type="button" 
                ng-click="$ctrl
                					 .update('Inc', $ctrl.store.model)
                           .update('Attach', $ctrl.store.model)">
          +
        </button>
      </div>
    `
};

angular.module('Todo', [])
  .service('CountStore', CountStore)
	.controller('CountController', CountController)
	.component('counter', Counter);

document.addEventListener('DOMContentLoaded', function () {
	angular.bootstrap(document, ['Todo']);
});