Did vs. Didn't - http://bl.ocks.org/insin/raw/0c13a1fa6387dce245f2/

index.html

<meta charset="UTF-8">
<title>Did vs. Didn't</title>
<script src="https://fb.me/react-0.13.3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: ubuntu, sans-serif;
}
.App__things {
  display: flex;
}
.App__thing {
  flex: 1;
}
a { cursor: pointer; }
</style>
<div id="app"></div>
<a href="https://gist.github.com/insin/0c13a1fa6387dce245f2"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script>void function() { "use strict";

function totalCost(things) {
  return things.reduce(function(cost, thing)  {return cost + thing.cost;}, 0)
}

function uuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c)  {
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
    return v.toString(16);
  })
}

var AddThing = React.createClass({displayName: "AddThing",
  getInitialState:function() {
    return {
      name: '',
      cost: ''
    }
  },

  onChange:function(e) {
    var change = {}
    change[e.target.name] = e.target.value
    this.setState(change)
  },

  addThing:function(e) {
    var $__0=   this.state,name=$__0.name,cost=$__0.cost
    this.setState({
      name: '',
      cost: ''
    }, function()  {return this.props.onAdd({
      key: uuid(),
      name: name,
      cost: Number(cost),
      date: Date.now()
    });}.bind(this))
  },

  render:function() {
    var $__0=   this.state,name=$__0.name,cost=$__0.cost
    var canAdd = !!(name && cost)
    return React.createElement("div", {onChange: this.onChange}, 
      React.createElement("input", {name: "name", value: name, placeholder: this.props.placeholder}), ' ', 
    "@ £", React.createElement("input", {name: "cost", value: cost, type: "number", step: "0.01", placeholder: "Price"}), ' ', 
      React.createElement("button", {type: "button", disabled: !canAdd, onClick: this.addThing}, "Add")
    )
  }
})

var Things = React.createClass({displayName: "Things",
  render:function() {
    if (!this.props.things.length) {
      return null
    }
    return React.createElement("div", null, 
      React.createElement("ul", null, 
        this.props.things.map(function(thing, index)  {return React.createElement("li", {key: thing.key}, 
          thing.name, " @ £", thing.cost.toFixed(2), ' ', 
          React.createElement("a", {onClick: this.props.onDelete.bind(null, index)}, "×")
        );}.bind(this))
      ), 
      React.createElement("h2", null, "£", this.props.total.toFixed(2))
    )
  }
})

var App = React.createClass({displayName: "App",
  getInitialState:function() {
    var initial = localStorage.didVsDidnt
    return initial ? JSON.parse(initial) : {
      dids: [],
      didnts: []
    }
  },

  onAddThing:function(key, thing) {
    this.state[key].push(thing)
    this.forceUpdate(this.saveState)
  },

  onDeleteThing:function(key, index) {
    this.state[key].splice(index, 1)
    this.forceUpdate(this.saveState)
  },

  saveState:function() {
    localStorage.didVsDidnt = JSON.stringify(this.state)
  },

  render:function() {
    var $__0=   this.state,dids=$__0.dids,didnts=$__0.didnts
    var didSpend = totalCost(dids)
    var didntSpend = totalCost(didnts)
    var saving = didntSpend - didSpend
    return React.createElement("div", {onChange: this.onChange}, 
      React.createElement("h1", null, "Did vs. Didn't"), 
      React.createElement("div", {className: "App__things"}, 
        React.createElement("div", {className: "App__thing"}, 
          React.createElement("h2", null, "Did"), 
          React.createElement(AddThing, {
            onAdd: this.onAddThing.bind(this, 'dids'), 
            placeholder: "Thing you bought"}
          ), 
          React.createElement(Things, {
            things: dids, 
            total: didSpend, 
            onDelete: this.onDeleteThing.bind(this, 'dids')}
          )
        ), 
        React.createElement("div", {className: "App__thing"}, 
          React.createElement("h2", null, "Didn't"), 
          React.createElement(AddThing, {
            onAdd: this.onAddThing.bind(this, 'didnts'), 
            placeholder: "Thing you didn't buy"}
          ), 
          React.createElement(Things, {
            things: didnts, 
            total: didntSpend, 
            onDelete: this.onDeleteThing.bind(this, 'didnts')}
          )
        )
      ), 
      saving != 0 && React.createElement("h2", null, "Saving: £", saving.toFixed(2))
    )
  }
})

React.render(React.createElement(App, null), document.getElementById('app'))

}()</script>

index.jsx.html

<meta charset="UTF-8">
<title>Did vs. Didn't</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: ubuntu, sans-serif;
}
.App__things {
  display: flex;
}
.App__thing {
  flex: 1;
}
a { cursor: pointer; }
</style>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

function totalCost(things) {
  return things.reduce((cost, thing) => (cost + thing.cost), 0)
}

function uuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
    return v.toString(16);
  })
}

var AddThing = React.createClass({
  getInitialState() {
    return {
      name: '',
      cost: ''
    }
  },

  onChange(e) {
    var change = {}
    change[e.target.name] = e.target.value
    this.setState(change)
  },

  addThing(e) {
    var {name, cost} = this.state
    this.setState({
      name: '',
      cost: ''
    }, () => this.props.onAdd({
      key: uuid(),
      name: name,
      cost: Number(cost),
      date: Date.now()
    }))
  },

  render() {
    var {name, cost} = this.state
    var canAdd = !!(name && cost)
    return <div onChange={this.onChange}>
      <input name="name" value={name} placeholder={this.props.placeholder}/>{' '}
    @ &pound;<input name="cost" value={cost} type="number" step="0.01" placeholder="Price"/>{' '}
      <button type="button" disabled={!canAdd} onClick={this.addThing}>Add</button>
    </div>
  }
})

var Things = React.createClass({
  render() {
    if (!this.props.things.length) {
      return null
    }
    return <div>
      <ul>
        {this.props.things.map((thing, index) => <li key={thing.key}>
          {thing.name} @ &pound;{thing.cost.toFixed(2)}{' '}
          <a onClick={this.props.onDelete.bind(null, index)}>&times;</a>
        </li>)}
      </ul>
      <h2>&pound;{this.props.total.toFixed(2)}</h2>
    </div>
  }
})

var App = React.createClass({
  getInitialState() {
    var initial = localStorage.didVsDidnt
    return initial ? JSON.parse(initial) : {
      dids: [],
      didnts: []
    }
  },

  onAddThing(key, thing) {
    this.state[key].push(thing)
    this.forceUpdate(this.saveState)
  },

  onDeleteThing(key, index) {
    this.state[key].splice(index, 1)
    this.forceUpdate(this.saveState)
  },

  saveState() {
    localStorage.didVsDidnt = JSON.stringify(this.state)
  },

  render() {
    var {dids, didnts} = this.state
    var didSpend = totalCost(dids)
    var didntSpend = totalCost(didnts)
    var saving = didntSpend - didSpend
    return <div onChange={this.onChange}>
      <h1>Did vs. Didn't</h1>
      <div className="App__things">
        <div className="App__thing">
          <h2>Did</h2>
          <AddThing
            onAdd={this.onAddThing.bind(this, 'dids')}
            placeholder="Thing you bought"
          />
          <Things
            things={dids}
            total={didSpend}
            onDelete={this.onDeleteThing.bind(this, 'dids')}
          />
        </div>
        <div className="App__thing">
          <h2>Didn't</h2>
          <AddThing
            onAdd={this.onAddThing.bind(this, 'didnts')}
            placeholder="Thing you didn't buy"
          />
          <Things
            things={didnts}
            total={didntSpend}
            onDelete={this.onDeleteThing.bind(this, 'didnts')}
          />
        </div>
      </div>
      {saving != 0 && <h2>Saving: &pound;{saving.toFixed(2)}</h2>}
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>