JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div ng-app="App">
    <div ng-controller="AppCtrl">
        <h2>The name is {{name}}</h2>
        type any name here: <input type="text" ng-model="name" placeholder="{{placeholder}}" />
    
        <colorpicker value="#ffcc00" brightnesslimit="0.5"></colorpicker>
    </div>
</div>

SCSS

$color: #333;

* {
    color : $color;
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

JavaScript

var App = angular.module('App', []);

var AppCtrl = function($scope){
    $scope.name = '';
    $scope.placeholder="Name goes here";    
};

App.directive("colorpicker", function(){

    return {
        restrict: "E",
        template: '<div><input type="color" /></div>',
        replace: true, // replace has less meaning when you must have a single container...
        compile: function compile(tElement, tAttrs, transclude) {
            return function(scope,tElement, tAttrs, transclude){
                console.log('%c compiled', "font-size:28px; font-weight: bold; background: hotpink;", tElement, tAttrs.value);
                $(tElement).css('background', tAttrs.value);
                $("input", tElement).on('change', function(){
                    console.log($(tElement).find('input').val());
                    $(tElement).css('background', $(this).val());
                    
                    // now I guess I could do things like not allowing brightness which is over the passed limit, but that's not a real challenge and I don't need it for anything. Gimme something useful :-D
                });
            } 
        }
    }
});