JSFiddle - React, Tailwind, and code Playground

by ammit

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var tasks = [
  { title: "Task 1" }, 
  { title: "Task 2" }, 
  { title: "Task 3" }, 
  { title: "Task 4" }, 
  { title: "Task 5"}
];

var Task = React.createClass({
    handleClick: function (e) {
      console.log(this.props);
      var currentOrder = this.props.order;
      this.props.clicked(currentOrder);
    },
    render: function () {
      var disabled = (this.props.task.locked) ? true : false;
      var done = this.props.task.done ? 'done' : '';
      return ( 
        <div> 
          <span class = "description">{ this.props.task.title }</span>
          <button type="button" onClick={this.handleClick} data-order={this.props.order} disabled={disabled} class=""></button>
          <span>{done}</span>
        </div>
      );
    }
});


var TaskList = React.createClass({
  getInitialState: function(){
    var taskList = this.props.tasks.map(function(task, i){
      task.done = false;
      // Unclock first task in the list
      task.locked = (i == 0) ? false : true;
      return task;
    });
    return {tasks:tasks};
  },
  whenClicked: function(order){
    clickedTaskOrder = order;
    unlockableTaskOrder = order+1;
    undo = false;
    lockNextOrders = false;
    var revisedTasks = this.state.tasks.map(function(task, i){
      if (undo) lockNextOrders = true;
      if (clickedTaskOrder == i) {
        if(task.done){
          task.done = false;
          undo = true;
        }else{
          task.done = true;
        }
      }
      if (unlockableTaskOrder == i) {
        task.locked = false;
      }
      if(lockNextOrders) {
        task.done = false;
        task.locked = true;
      }
      return task;
    });
    this.setState({tasks:revisedTasks});
    return;
  },
  render: function(){
    var that = this;
    var taskNodes = this.state.tasks.map(function (task, i) {
      return <Task task={task} order={i} clicked={that.whenClicked} />
    });
    return ( 
      <div class = "task-list">
        { taskNodes } 
     ...