Kiran | Completed Basic and Todo tutorial.

kirang20 · Mar 30, 2013 · f1cc525 · f1cc525
1 parent fe5f0ea
commit f1cc525
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 0 deletions.
diff --git a/src/todo/todo.css b/src/todo/todo.css
@@ -0,0 +1,4 @@
+.done-true {
+	text-decoration: line-through;
+	color: grey;
+}
diff --git a/src/todo/todo.html b/src/todo/todo.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ng-app>
+	<head>
+		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
+		<script src="todo.js"></script>
+		<link rel="stylesheet" href="todo.css">
+		<title>TODO</title>
+	</head>
+	<body>
+		<h2>Todo</h2>
+		<div ng-controller="TodoController">
+			<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>
+				<form ng-submit="addTodo()">
+					<input type="input" ng-model="todoText" size="30" placeholder="add new todo here" />
+					<input type="submit" class="btn-primary" value="add" />
+				</form>
+			</ul>
+		</div>
+	</body>
+</html>
diff --git a/src/todo/todo.js b/src/todo/todo.js
@@ -0,0 +1,26 @@
+function TodoController($scope) {
+	$scope.todos = [
+		{"text": "Task 1", "done": false},
+		{"text": "Task 2", "done": false},
+		{"text": "Task 3", "done": true}
+	];
+
+	$scope.addTodo = function() {
+		$scope.todos.push({"text" : $scope.todoText, "done": false});
+		$scope.todoText = "";
+	};
+
+	$scope.remaining = function() {
+		var notDone = $scope.todos.filter(function(todo) {
+			return !todo.done;
+		});
+		return notDone.length;
+	};
+
+	$scope.archive = function() {
+		var notDoneOnes = $scope.todos.filter(function(todo) {
+			return !todo.done;
+		});
+		$scope.todos = notDoneOnes;
+	};
+}
diff --git a/src/tutorial-1/index.html b/src/tutorial-1/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html ng-app>
+	<head>
+		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
+		<title>Basic Tutorial</title>
+	</head>
+	<body>
+		<div>
+			<label>Name: </label>
+			<input type="text" ng-model="name" placeholder="Enter a name here!" />
+			<h1>Hello {{name}}</h1>
+		</div>
+	</body>
+</html>