JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Colors</title>
<script type="text/javascript" src=""></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="test">Colors</p>
  <p id="result"></p>
</body>
</html>

JavaScript

var ColorChooser = {};
ColorChooser.Color = Backbone.Model.extend({
    url: function() {
        return '/color/' + this.get('values').join('');
    },
    initialize: function () {
        console.log("I am a Color");
    }, validate: function(attrs) {
        if('undefined' !== typeof attrs.values && ( null === attrs.values || !_.isArray( attrs.values ) || attrs.values.length < 3 || attrs.values.length > 3 ) ) {
            return 'Fuck you';
        }
   }
});

ColorChooser.Colors = Backbone.Collection.extend({
    url: '/colors',
    model: ColorChooser.Color
});

ColorChooser.Utils = {}
ColorChooser.Utils.createPalette = function (collection) {
    var result = '';
    _.map(collection.pluck('values'), function (obj) {
        result += "+" + obj.join('');
    });
    return result.replace(/^\+/, '');
};

ColorChooser.Utils.parsePalette = function (palette) {
    var results = [];
    _.map(palette.split('+'), function (obj) {
        results.push([obj.substr(0, 2), obj.substr(2, 2), obj.substr(4, 2)]);
    });
    return results;
};

/* Setup */
(function () {

    colors = new ColorChooser.Colors([{
        type: 'RGB',
        values: ['66', '00', '00']
    }, {
        type: 'RGB',
        values: ['00', '66', '00']
    }, {
        type: 'RGB',
        values: ['00', '00', '99']
    }]);

    //colors.fetch();
    if( false !== colors.at(0).set('values', [ '00', '00', '66' ] ) ) {
       //colors.sync();   
    }
        

})();