Comparison of Todo app from Angular site with a jQuery implementation
A Pen by Daniel Moore on CodePen.
<!-- 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> |
Comparison of Todo app from Angular site with a jQuery implementation
A Pen by Daniel Moore on CodePen.
//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(); |
.done-true { | |
text-decoration: line-through; | |
color: grey; | |
} | |
.example1 { | |
margin-bottom: 10px; | |
} | |
.example1, .example2 { | |
padding: 10px; | |
background-color: gainsboro; | |
} |