JSFiddle - React, Tailwind, and code Playground

by jillesme

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="app">
  <case-switcher></case-switcher>
</div>

JavaScript

angular
  .module('demo', [])
  .directive('caseSwitcher', function() {
    return {
      restrict: 'E',
      template: [
        '<div>',
          '<input type="text" ng-model="ctrl.username" />',
          '<button ng-click="ctrl.toUpperCase()">UPPERCASE!</button>',
          '<button ng-click="ctrl.toLowerCase()">lowercase!</button>',
          '<h1>{{ ctrl.username }}</h1>',
        '</div>'
      ].join(''),
      controllerAs: 'ctrl',
      controller: function() {
        var ctrl = this;

        ctrl.username = '';

        ctrl.toUpperCase = function() {
          ctrl.username = ctrl.username.toUpperCase();
        };

        ctrl.toLowerCase = function() {
          ctrl.username = ctrl.username.toLowerCase();
        };
      }
    }
  });

angular.bootstrap(document.querySelector('.app'), ['demo']);