Nice little Angular todo list app
A Pen by Ryan Trimble on CodePen.
Nice little Angular todo list app
A Pen by Ryan Trimble on CodePen.
<div ng-app="myApp"> | |
<h1>To Do List</h1> | |
<div ng-controller="mainCtrl"> | |
<ul class="main" id="sortable"> | |
<li class="ui-state-default" ng-repeat="todo in todos"> | |
<i class="fa fa-sort sort"></i> | |
<i class="fa checkbox" ng-class="{'fa-square-o': !checked, 'fa-check-square-o': checked}" ng-click="checked = !checked"></i> | |
<i class="fa fa-times-circle-o remove" ng-click="removeItem($index)"></i> | |
<label ng-class="{'checked': checked}" ng-hide="editable" for="name" ng-click="editable = !editable" event-focus="click" event-focus-id="{{todo.name}}{{todo.id}}" ng-bind="todo.name"></label> | |
<input ng-hide="!editable" ng-blur="editable = false" id="{{todo.name}}{{todo.id}}" rel="name" type="text" ng-model="todo.name" /> | |
</li> | |
</ul> | |
<form ng-submit="addTodo(newItem)" > | |
<label for="addItem">Add Task:</label> | |
<input rel="addItem" type="text" ng-model="newItem" /> | |
<!--<button ng-click="addTodo(newItem)"><i class="fa fa-plus"></i></button>--> | |
<input type="submit" id="submit" value="Add" /> | |
</form> | |
</div> | |
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> | |
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>--> | |
</div> |
angular.module("myApp", []) | |
.factory('focus', function($timeout, $window) { | |
return function(id) { | |
// timeout makes sure that is invoked after any other event has been triggered. | |
// e.g. click events that need to run before the focus or | |
// inputs elements that are in a disabled state but are enabled when those events | |
// are triggered. | |
$timeout(function() { | |
var element = $window.document.getElementById(id); | |
if(element) | |
element.focus(); | |
}); | |
}; | |
}) | |
.directive('eventFocus', function(focus) { | |
return function(scope, elem, attr) { | |
elem.on(attr.eventFocus, function() { | |
focus(attr.eventFocusId); | |
}); | |
// Removes bound events in the element itself | |
// when the scope is destroyed | |
scope.$on('$destroy', function() { | |
element.off(attr.eventFocus); | |
}); | |
}; | |
}) | |
.controller("mainCtrl", function($scope){ | |
$scope.todos = [ | |
{"name":"Do laundry", "id":1}, | |
{"name":"Take out trash", "id":2}, | |
{"name":"Pay bills", "id":3}, | |
] | |
$scope.getRandomSpan = function(){ | |
return Math.floor((Math.random()*6)+1); | |
} | |
$scope.addTodo = function(item){ | |
$scope.todos.push({"name": item, "id":$scope.getRandomSpan()}); | |
$scope.newItem=""; | |
} | |
$scope.removeItem = function(index) { | |
$scope.todos.splice(index, 1); | |
}; | |
}); | |
$(function() { | |
$( "#sortable" ).sortable(); | |
$( "#sortable" ).disableSelection(); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> |
body{ | |
background:#333; | |
color:#FFF; | |
font-family:"Helvetica", "Arial", sans-serif; | |
} | |
.main{ | |
margin-top:25px; | |
} | |
div{ | |
position:relative; | |
top:25px; | |
width:75%; | |
margin:0 auto; | |
h1{ | |
font-size:40px; | |
text-align:center; | |
} | |
} | |
ul{ | |
border-top:10px solid #2980b9; | |
} | |
li,form{ | |
font-size:24px; | |
color:#2c3e50; | |
padding:20px; | |
background:#ecf0f1; | |
border-top:1px solid #2c3e50; | |
input{ | |
padding:5px; | |
font-size:24px; | |
border:1px solid #2c3e50 | |
} | |
.checkbox{ | |
font-size:20px; | |
} | |
.remove{ | |
float:right; | |
visibility:hidden; | |
} | |
.sort{ | |
visibility:hidden; | |
} | |
}li:hover{ | |
.remove, .sort{ | |
visibility:visible; | |
} | |
} | |
form{ | |
label{ | |
font-size:18px; | |
color:#2c3e50; | |
display:block; | |
} | |
input{ | |
width:80%; | |
} | |
input[type="submit"]{ | |
background:#2980b9; | |
border:1px solid #2c3e50; | |
border-radius:10px; | |
width:70px; | |
color:#FFF; | |
font-size:24px; | |
padding:5px; | |
padding-left:10px; | |
padding-right:10px; | |
} | |
} | |
.checked{ | |
text-decoration:line-through; | |
color:#95a5a6; | |
} | |
@media screen and (max-width:700px){ | |
div{ | |
width:90%; | |
input{ | |
width:50%; | |
} | |
} | |
form{ | |
input{ | |
width:75%; | |
} | |
} | |
li .remove{ | |
float:right; | |
visibility:visible; | |
} | |
li .sort{ | |
visibility:visible; | |
} | |
} |