JSFiddle - React, Tailwind, and code Playground

by Kevin Kirchner

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>
<script type="text/javascript" ng:autobind>
  /**
 * @license AngularJS v1.0.3
 * (c) 2010-2012 Google, Inc. http://angularjs.org
 * License: MIT
 */
(function(window, document, undefined) {
'use strict';

////////////////////////////////////

/**
 * @ngdoc function
 * @name angular.lowercase
 * @function
 *
 * @description Converts the specified string to lowercase.
 * @param {string} string String to be converted to lowercase.
 * @returns {string} Lowercased string.
 */
var lowercase = function(string){return isString(string) ? string.toLowerCase() : string;};


/**
 * @ngdoc function
 * @name angular.uppercase
 * @function
 *
 * @description Converts the specified string to uppercase.
 * @param {string} string String to be converted to uppercase.
 * @returns {string} Uppercased string.
 */
var uppercase = function(string){return isString(string) ? string.toUpperCase() : string;};


var manualLowercase = function(s) {
  return isString(s)
      ? s.replace(/[A-Z]/g, function(ch) {return fromCharCode(ch.charCodeAt(0) | 32);})
      : s;
};
var manualUppercase = function(s) {
  return isString(s)
      ? s.replace(/[a-z]/g, function(ch) {return fromCharCode(ch.charCodeAt(0) & ~32);})
      : s;
};


// String#toLowerCase and String#toUpperCase don't produce correct results in browsers with Turkish
// locale, for this reason we need to detect this case and redefine lowercase/uppercase methods
// with correct but slower alternatives.
if ('i' !== 'I'.toLowerCase()) {
  lowercase = manualLowercase;
  uppercase = manualUppercase;
}

function fromCharCode(code) {return String.fromCharCode(code);}


var Error             = window.Error,
    /** holds major version number for IE or NaN for real browsers */
    msie              = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]),
    jqLite,          ...

CSS

.done_false {text-decoration: none; color: red;}
.done_true {text-decoration: line-through; color: gray;}

JavaScript

function TodoCtrl() {
    var scope = this;
    
    // initialize controller's model    
    this.todos = [{
        text: "learn Angular",
        done: true},
    {
        text: "build Angular app",
        done: false},
    {
        text: "show off Angular app",
        done: false}];
    
    // Define member functions
    this.addTodo = function() {
        scope.todos.push({
            text: scope.todoText,
            done: false
        });
        scope.remaining++;
        scope.todoText = "";
    };

    this.recalc = function() {
        scope.remaining = scope.todos.length;
        angular.forEach(scope.todos, function(todo) {
            if (todo.done) {
                scope.remaining--;
            }
        });
    };

    this.removeDone = function() {
        var todos = scope.todos;
        scope.todos = [];
        
        angular.forEach(todos, function(todo) {
            if (!todo.done) {
                scope.todos.push(todo);
            }
        });
    };

    // call recalc once to update the model's 'remaining' value
    // Note: this needs to be called after definition
    this.recalc();
}