JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type ="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>

CSS

.box {
    width: 100px;
    height: 100px;
    padding: 1em;
    background-color: black;
    cursor: pointer;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
    float: left;
    font-size: 1em;
    text-shadow: 1px 1px 3px 3px white;
    word-wrap: break-word;
}

.selected {
    opacity: 0.85;
}

.selected:hover {
    opacity: 1;
}

.unselected {
    opacity: 0.5;
}

.unselected:hover {
    opacity: 0.65;
}

JavaScript

var MainV = React.createClass({
    
    
    
    getDefaultProps: function(){
        return {
            rows: null
        }
    },
    
    
    
    getInitialState: function(){
        return {
            
        }
    },
    
    
    
    __onItemRendererSelect: function(data){
        // alert(data.color)
    },
    
    
    
    render: function(){
        var _this = this;
        return React.DOM.div({
            className: 'root'
        },
            _.map(this.props.rows, function(row){
                return new ItemRendererV({
                    data: row,
                    onSelect: _this.__onItemRendererSelect
                });
            })
        )
    }
    
    
    
})





var ItemRendererV = React.createClass({
    
    
    
    getDefaultProps: function(){
        return {
            data: {
                color: null,
                value: null
            },
            onSelect: null
        }
    },
    
    
    
    getInitialState: function(){
        return {
            selected: false
        }
    },
    
    
    
    __onClick: function(){
        this.setState({selected: !this.state.selected}, function(){
            if(this.state.selected && this.props.onSelect){
                this.props.onSelect(this.props.data);
            }
        })
    },
    
    
    
    render: function(){
        return React.DOM.div({
            className: 'box ' + (this.state.selected ? 'selected' : 'unselected'),
            onClick: this.__onClick,
            style: {
                backgroundColor: this.props.data.value
            }
        }, this.props.data.color)
    }
    
    
    
});

function getTags(){
    $.getJSON("http://localhost:3000/data", function(data){
        
        var mainV = new MainV({
            rows: _.map(data.tags, function(t){
                return {
                    color: t,
                    value: getRandomColor().value
                }
            })
        });
       ...