https://www.gravatar.com/avatar/7150a453468d14f599772cd8330fcf25/?default=&s=80

by Caroline Wu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12512178_218562685145124_130271029_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

render: function() {
  return (
    <form id="add-form" onSubmit={this.handleSubmit}>
      <input id='create' ref="description" type='text' placeholder='Add Something to the list!' />
    </form>
  )
},

handleSubmit: function(event) {
  event.preventDefault()
  var description = this.refs.description.getDOMNode().value
  this.refs.description.getDOMNode().value = ''
  alert('trying to create an item with description ' + description)
}

handleSubmit: function(event) {
  event.preventDefault()
  var description = this.refs.description.getDOMNode().value
  this.refs.description.getDOMNode().value = ''
  ListStore.addItem(description)
}

addItem: function(itemDescription) {
  var creationRequest = $.ajax({
    type: 'POST',
    url: "http://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
    data: { description: itemDescription, completed: false }
  })
},

creationRequest.done(function(itemDataFromServer) {
  items.push(itemDataFromServer)
  notifyComponents()
})

ListStore = {

  getItems: function() {
    return items
  },

  loadItems: function() {
    var loadRequest = $.ajax({
      type: 'GET',
      url: "https://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/"
    })

    loadRequest.done(function(dataFromServer) {
      items = dataFromServer.items
      notifyComponents()
    })
  },

  addItem: function(itemDescription) {
    var creationRequest = $.ajax({
      type: 'POST',
      url: "http://listalous.herokuapp.com/lists/YOUR-LIST-NAME-HERE/items",
      data: { description: itemDescription, completed: false }
    })

    creationRequest.done(function(itemDataFromServer) {
      items.push(itemDataFromServer)
      notifyComponents()
    })
  },
  toggleCompleteness: function(itemId) {}
}