Yu

todo-src/index.html

@@ -14,29 +14,55 @@ <h1 class="text-center">My little to do app!</h1>
 
     <div id="todo" class="col-xs-6 col-xs-offset-3" ng-controller="MainCtrl">
 
-        <div class="input-group">
-          <input type="text" class="form-control" placeholder="Item to add to todo list" ng-model="newItem">
-          <span class="input-group-btn">
-            <button class="btn btn-default" type="button" ng-click="addItem()">
-              Add
-              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
-            </button>
-          </span>
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Item to add to todo list. Choose priority and add by selecting button." ng-model="newItem">
         </div><!-- /input-group -->
+
+        <div class="btn-group btn-group-justified">
+          <a class="btn btn-danger" type="button" ng-click="addItemHigh()">Priority: Now <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a>
+          <a class="btn btn-warning" type="button" ng-click="addItemMedium()">Priority: Tomorrow <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a>
+          <a class="btn btn-success" type="button" ng-click="addItemLow()">Priority: Someday <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a>
+        </div>
 
-      <h2>stuff i gotta do asap</h2>
+      <!-- display total number of things to do -->
+      <h2>stuff i gotta do asap: <small ng-bind="get_len()"></small><small> total things to do</small></h2>
+
 
-      <ul class="list-group">
         <!-- http://www.w3schools.com/css/css_float.asp -->
-        <li class="list-group-item clearfix" ng-repeat="do in todos">
-
-          <span>{{do}}</span>
-          <button class="btn btn-danger pull-right" type="button" ng-click="deleteItem(do)">
-            <span class="glyphicon glyphicon-trash " aria-hidden="true"></span>
+        <li class="list-group-item clearfix" ng-repeat="do in todos" ng-style="!getActive(do) && {'text-decoration':'line-through'}">
+
+          <span ng-hide="editingMode(do)">{{do}}</span>
+          <input ng-model="editor.text" ng-show="editingMode(do)">
+          <span class="pull-right">
+          <div class="btn-group" role="group" aria-label="editButton" ng-hide="editingMode(do)">
+          <button ng-show="getActive(do)" class="btn btn-success pull-right" type="button" ng-click="toggleItem(do)" id="checkButton">
+            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
           </button>
+
+          <button class="btn btn-primary btn-sm" type="button" ng-click="editItem(do)">
+            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+            </button> 
+            </div>
+            <div class="btn-group" role="group" aria-label="saveButton" ng-show="editingMode(do)">
+          <button class="btn btn-primary btn-sm" type="button" ng-click="saveItem(do)">
+            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+            </button> 
+            </div>
+            <div class="btn-group" role="group" aria-label="cancelButton" ng-show="editingMode(do)">
+          <button class="btn btn-primary btn-sm" type="button" ng-click="cancelItem(do)">
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+            </button> 
+            </div>
+          <div class="btn-group" role="group" aria-label="deleteButton" ng-hide="editingMode(do)">
+          <button class="btn btn-danger btn-sm" type="button" ng-click="deleteItem(do)">
+            <span class="glyphicon glyphicon-trash " aria-hidden="true"></span>
+            </button>
+            </div>
+            </span> 
+          </li>
 
-        </li>
-      </ul>
+      <!--Button will only be shown if there are items in list-->
+      <button type="button" id="DeleteAll" class="btn btn-primary btn-lg btn-block ng-hide" ng-show="todos.length" ng-click="deleteAll()"><h2>Delete Completed Items!</h2></button>
     </div>
 
   </body>

todo-src/script.js

@@ -4,23 +4,111 @@ var myApp = angular.module('app', []);
 
 myApp.controller('MainCtrl', function ($scope){
   $scope.todos = ["Learn Angular", "Learn node"];
+  $scope.dones = [false, false];
+  $scope.editor = { text : null, index : null };
   $scope.newItem = "";
-  
+
   $scope.addItem = function(){
+
+    console.log("in add");
+    if ($scope.newItem !== ""){
+      if($scope.todos.indexOf($scope.newItem) === -1){
+        $scope.todos.push($scope.newItem);
+      }
+      $scope.newItem = "";
+    }
+  }
+
+  $scope.addItemHigh = function(){
     console.log("in add");
     if ($scope.newItem !== ""){
-      $scope.todos.push($scope.newItem);
+      $scope.todos.push("NOW: " + $scope.newItem);
       $scope.newItem = "";
     }
   }
+
+  $scope.addItemMedium = function(){
+    console.log("in add");
+    if ($scope.newItem !== ""){
+      $scope.todos.push("TOMORROW: " + $scope.newItem);
+      $scope.newItem = "";
+    }
+  }
+
+  $scope.addItemLow = function(){
+    console.log("in add");
+    if ($scope.newItem !== ""){
+      $scope.todos.push("SOMEDAY: " + $scope.newItem);
+      $scope.newItem = "";
+    }
+  }
+
+  $scope.editItem = function(item){
+    console.log("in edit");
+    var index = $scope.todos.indexOf(item);
+    $scope.editor.index = index;
+    $scope.editor.text = item;
+  }
+
+  $scope.saveItem = function(item){
+    console.log("in save");
+    $scope.todos[$scope.editor.index] = $scope.editor.text;
+    $scope.editor.index = null;
+  }
+
+  $scope.cancelItem = function(item){
+    console.log("in cancel");
+    $scope.editor.index = null;
+  }
+
+  $scope.editingMode = function(item){
+    var index = $scope.todos.indexOf(item);
+    return $scope.editor.index === index;
+  }
+
 
   $scope.deleteItem = function(item){
     console.log("in delete");
     var index = $scope.todos.indexOf(item);
     $scope.todos.splice(index, 1);
+    $scope.dones.splice(index, 1);
   }
+
 
+  $scope.toggleItem = function(item){
+    console.log("in toggle");
+    var index = $scope.todos.indexOf(item);
+    $scope.dones[index] = !$scope.dones[index];
+  }
+
+  $scope.getActive = function(item){
+    console.log("in toggle");
+    var index = $scope.todos.indexOf(item);
+    return !$scope.dones[index];
+  }
+
 
+  $scope.deleteAll = function(){
+    var length = $scope.dones.length; //get all the todos in the list
+    if(length !== 0){
+      var a = confirm("Are you really sure you want to do this?");
+      if(a){
+        console.log("deleted All");
+        for(i = 0; i < length; i++){
+          if($scope.dones[i]){
+            $scope.todos.splice(i,0); //delete all them from the list
+            $scope.dones.splice(i,0);
+          }
+        }
+      }
+    }
+  }
+
+  $scope.get_len = function() {
+    return $scope.todos.length;
+  }
+
+
 });
 
 /*************************

todo-src/style.css

@@ -1,4 +1,12 @@
 /* Styles go here */
-body {
-  background: green;
+
+/*1.Change the background color of the to-do app*/
+body{
+	background-color: #e7e7f6;
 }
+
+#DeleteAll {
+    background-color: red;
+    color: white;
+
+}