JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/77c12aca8fd0db4fb9ca1a8fffe7688971f23bdb/backbone.js"></script>

<h2>Todo Sample from backbone project</h2>


    <!-- Todo App Interface -->

    <div id="todoapp">

      <div class="title">
        <h1>Todos</h1>
      </div>

      <div class="content">

        <div id="create-todo">
          <input id="new-todo" placeholder="What needs to be done?" type="text" />
          <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
        </div>

        <div id="todos">
          <ul id="todo-list"></ul>
        </div>

        <div id="todo-stats"></div>

      </div>

    </div>

    <ul id="instructions">
      <li>Double-click to edit a todo.</li>
    </ul>

    <!-- Templates -->

    <script type="text/template" id="item-template">
      <div class="todo <%= done ? 'done' : '' %>">
        <div class="display">
          <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
          <div class="todo-text"></div>
          <span class="todo-destroy"></span>
        </div>
        <div class="edit">
          <input class="todo-input" type="text" value="" />
        </div>
      </div>
    </script>

    <script type="text/template" id="stats-template">
      <% if (total) { %>
        <span class="todo-count">
          <span class="number"><%= remaining %></span>
          <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
        </span>
      <% } %>
      <% if (done) { %>
        <span class="todo-clear">
          <a href="#">
            Clear <span class="number-done"><%= done %></span>
            completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
          </a>
        </span>
      <% } %>
    </script>

JavaScript

$(function () {

    // Todo Model
    // ----------

    // Our basic **Todo** model has `text`, `order`, and `done` attributes.
    window.Todo = Backbone.Model.extend({

        idAttribute: 'Id',

        // Default attributes for a todo item.
        defaults: function () {
            return {
                done: false,
                order: Todos.nextOrder()
            };
        },

        // Toggle the `done` state of this todo item.
        toggle: function () {
            this.save({ done: !this.get("done") });
        }

    });

    // Todo Collection
    // ---------------

    // The collection of todos is backed by *localStorage* instead of a remote
    // server.
    window.TodoList = Backbone.Collection.extend({

        // Reference to this collection's model.
        model: Todo,

        // Save all of the todo items under the `"todos"` namespace.
        //localStorage: new Store("todos"),

        url: function () {
            return 'api/todos';
        },

        // Filter down the list of all todo items that are finished.
        done: function () {
            return this.filter(function (todo) { return todo.get('done'); });
        },

        // Filter down the list to only todo items that are still not finished.
        remaining: function () {
            return this.without.apply(this, this.done());
        },

        // We keep the Todos in sequential order, despite being saved by unordered
        // GUID in the database. This generates the next order number for new items.
        nextOrder: function () {
            if (!this.length) return 1;
            return this.last().get('order') + 1;
        },

        // Todos are sorted by their original insertion order.
        comparator: function (todo) {
            return todo.get('order');
        }
    });

    // Create our global collection of **Todos**.
    window.Todos = new TodoList;

    // Todo Item View
    // --------------

    // The DOM element for a todo...