Nice little Angular todo list app
A Pen by Ryan Trimble on CodePen.
Created
December 1, 2015 23:32
-
-
Save mrtrimble/456072903be4e7af3f2b to your computer and use it in GitHub Desktop.
Angular To Do List
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment