JSFiddle - React, Tailwind, and code Playground

by batkin

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

* {
  font-family: Helvetica, Arial, sans-serif;
}
body > div {
  padding: 10px;
}
ul, li {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: 8px;
  padding: 0;
}
a.tag {
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid green;
  color: green;
  text-decoration: none;
  font-size: 80%;
  padding: 2px 5px;
}
form {
  background-color: #ffb;
  padding: 5px;
  max-width: 300px;
}
input[name=description] {
  width: 95%;
  font-size: 120%;
}
input[name=tags] {
  width: 70%;
}
input[type=submit] {
  font-size: 120%;
}
label {
  font-style: italic;
  font-size: 80%;
  margin-right: 5px;
}
.clear-tag {
  margin-left: 5px;
}

a.remove-item {
  color: red;
  text-decoration: none;
  margin-left: 5px;
  display: none;
}

li.todo-item:hover a.remove-item {
  display: inline;
}

JavaScript 1.7

/**
* @jsx React.DOM
*/

var TagSelector = React.createClass({
  render: function() {
    if (this.props.tag == null) {
      return <p><em>Showing all tags</em></p>
    } else {
      return (
        <p>
          <em>Showing {this.props.tag}</em>
          <a href="#" onClick={this.clearTag} className="clear-tag">Clear</a>
        </p>
      )
    }
  },
  clearTag: function(event) {
    event.preventDefault();
    this.props.tagHandler(null)
  }
});

var Todo = React.createClass({
  render: function() {
    var createTag = function(tag) {
      return <a className="tag" data-tag={tag} href="#" onClick={this.setTag} key={tag}>{tag}</a>
    }.bind(this)
    return (
      <li className="todo-item">
        {this.props.description}
        {this.props.tags.map(createTag)}
        <a href="#" onClick={this.removeItem} data-id={this.props.key} className="remove-item" title="remove item">✖</a>
      </li>
    )
  },
  setTag: function(e) {
    this.props.tagHandler(e.target.getAttribute('data-tag'))
  },
  removeItem: function(e) {
    this.props.removeHandler(e.target.getAttribute('data-id'))
  }
})

var TodoList = React.createClass({
  getInitialState: function() {
    this.nextItemId = 1;
    var initialState = {
      items: [
        { description: 'pay phone bill', tags: ['personal', 'phone'] },
        { description: 'call client', tags: ['work', 'phone'] },
        { description: 'code quux prototype', tags: ['work', 'computer'] },
        { description: 'meet Kelly for chess', tags: ['personal', 'outside'] }
      ],
      selectedTag: null,
      description: '',
      tags: ''
    }
    for (var i=0; i < initialState.items.length; i++) {
      initialState.items[i].id = this.nextItemId;
      this.nextItemId += 1;
    }
    return initialState;
  },
  render: function() {
    var tagHandler = this.tagHandler
    var removeHandler = this.removeHandler
    var createItem = function(item) {
      return <Todo data-id={item.id} key={item.id}...