A Pen by Daniel Moore.

index.html

<!-- Angular Implementation -->
<div class="example1" ng-app>
  <h2>Todo - AngularJS</h2>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

<!-- jQuery implementation -->
<div class="example2">
  <h2>Todo - jQuery</h2>
  <div>
    <span class="js-status"></span>
    [ <a class="js-archive-link" href="">archive</a> ]
    <ul class="unstyled js-list">
    </ul>
    <form>
      <input class="js-add-field" type="text" size="30" placeholder="add new todo here">
      <input class="btn-primary js-add-button" type="submit" value="add">
    </form>
  </div>
</div>

jQuery-vs-AngularJS---Todo-App.markdown

jQuery vs AngularJS - Todo App

Comparison of Todo app from Angular site with a jQuery implementation

A Pen by Daniel Moore on CodePen.

License.

script.js

//Angular implementation
function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

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

//jQuery implementation
var todoApp = (function($) {
  var _todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];
  
  function _init() {
    _updateAll(); 
    $('.js-archive-link').click(function() {
      _archive();
      _updateAll();
      return false;
    });
    
    $('.js-add-button').click(function() {
      var $addField = $('.js-add-field');
      _addTodoItem($addField.val(), false);
      $addField.val('');
      _updateAll();
    });
  }
  
  function _addTodoItem(text, done) {
    _todos.push({
      text: text,
      done: done
    });
  }
  
  function _updateAll() {
    _updateListItems();
    _updateStatus();
  }
  
  function _updateListItems() {
    var $list = $('.js-list');
    
    $list.empty();
    _todos.forEach(function(todo, idx) {
      $list.append(
        '<li class="js-list-item" data-index="' + idx + '">\r\n' +
          '<input type="checkbox" ' + (todo.done ? 'checked ' : '') + '" />\r\n' +
          '<span class="js-todo-text done-' + todo.done + '">' + todo.text + '</span>\r\n' + 
        '</li>'
      );
    })
    
    $('.js-list-item').change(function() {
      _onListItemChange($(this));
      _updateAll();
    });
  }
  
  function _onListItemChange($listItem) {
    var checkbox = $listItem.find('input:checkbox').get()[0];
    var todoIdx = $listItem.data().index;
    _todos[todoIdx].done = checkbox.checked;
    _updateListText($listItem, checkbox.checked);
  }
  
  function _updateListText($listItem, done) {
    var $text = $listItem.find('.js-todo-text');
    $text.removeClass('done-' + !done);
    $text.addClass('done-' + !!done);
  }
  
  function _getRemaining() {
    return _todos.filter(function(todo) {
      return !todo.done;
    });
  }
                          
  function _getStatusText() {
    return _getRemaining().length + ' of ' + _todos.length + ' remaining'; 
  }
  
  function _updateStatus() {
    $('.js-status').text(_getStatusText());
  }
  
  function _archive() {
    _todos = _getRemaining();
  }
  
  return {
    init: _init
  };
  
})(jQuery);

todoApp.init();

style.css

.done-true {
  text-decoration: line-through;
  color: grey;
}

.example1 {
  margin-bottom: 10px;
}

.example1, .example2 {
  padding: 10px;
  background-color: gainsboro;
}