JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id='add-company'>
        <input id='new-company' placeholder='Add a new company' type='text' />
      </div>
      <div id="buckets">
        <ul id="bucket-list"></ul>
        <div id="new-bucket-item" class="bucket-item">
          <input id='new-bucket' placeholder='Add bucket' type='text' />
        </div>
      </div>

<script type="text/template" id="item-template">
      <div class="company">
        <div class="display">
          <span class="company-text"></span>
          <span class="company-mood">
            <span class="mood"></span>
          </span>
          <span class="company-destroy"></span>
        </div>
        <div class="edit">
          <input class="company-input" type="text" value="" />
        </div>
      </div>
    </script>

     <script type="text/template" id="bucket-template">
      <div class="bucket">
        <div class="display">
          <span class="bucket-name"></span>
          <span class="editing-name">
            <input class="bucket-input" type="text" value="" />
          </span>
          <span class="bucket-destroy"></span>
          <ul class="bucket-companies">
          </ul>
        </div>
        <div class="edit">
        </div>
      </div>
    </script>

CSS

#add-company {
  width: 300px;
  margin: auto;
}

input#new-company {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  font-size: 1.5em;
  text-align: center;
  width: 300px;
}


input#new-bucket {
  border: 0px;
  border-radius: 3px;
  padding: 5px;
  font-size: 1.5em;
  text-align: center;
  width: 160px;
}

JavaScript

window.AppView = Backbone.View.extend({
    el: $("#hireeapp"),

    events: {
      "keypress #new-company":  "createCompanyOnEnter",
      "keypress #new-bucket":  "createBucketOnEnter",
      "click #data-backup":  "backup"
    },

    initialize: function() {
      this.companyInput    = this.$("#new-company");
      this.bucketInput = this.$("#new-bucket");

      Buckets.bind('add',   this.addBucket, this);
      Buckets.bind('reset', this.addBuckets, this);

      Companies.fetch();
      Buckets.fetch();

      if (Buckets.length == 0) {
        Buckets.create({name: "Interested"});
      
      }
    },

    addBucket: function(bucket) {
      var view = new BucketView({model: bucket});
      this.$("#bucket-list").append(view.render().el);
      view.addCompanies();
    },

    addBuckets: function() {
      Buckets.each(this.addBucket);
    },

    createCompanyOnEnter: function(e) {
      var text = this.companyInput.val();
      if (!text || e.keyCode != 13) return;
      var initialBucket = Buckets.at(0);
      var company = Companies.create({text: text}); 
      company.setBucket(initialBucket.id);
      initialBucket.addCompany(company.id);
      this.companyInput.val('');
    },

    createBucketOnEnter: function(e) {
      var text = this.bucketInput.val();
      if (!text || e.keyCode != 13) return;
      console.log("creating bucket");
      Buckets.create({name: text});
      this.bucketInput.val('');
    },

    backup: function(e) {
      var buckets = localStorage.getItem("buckets");
      var companies = localStorage.getItem("companies");
      var backup = {
        buckets: JSON.parse(buckets),
        companies: JSON.parse(companies)
      };
      uriContent = "data:application/octet-stream;filename=hiree.backup," + encodeURIComponent(JSON.stringify(backup));
      newWindow=window.open(uriContent, 'Hiree Backup');
    }

  });

 window.App = new AppView();