inserted basic label recommendation UI handling

css/todos.css

@@ -239,3 +239,26 @@ body {
         text-decoration: line-through; }
     body ul li:nth-child(odd) {
       background-color: #F7F7F7; }
+   body .label {
+		padding: 1px 3px 2px;
+		font-size: 9.75px;
+		font-weight: bold;
+		color: white;
+		text-transform: uppercase;
+		white-space: nowrap;
+		background-color: #46A546;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+	}
+
+	#recommendBox {
+		padding-top: 5px;
+	}
+
+	#recommendBox li {
+		display: inline;
+		list-style-type: none;
+		padding-right: 5px;
+		background-color: #FFF;
+	}

index.html

@@ -27,7 +27,15 @@ <h1>Todos</h1>
 
   <!-- SUGGESTION: Here you could put a new #collection with a binding to
        your newly created controller: Todos.tagsController -->
-
+
+
+  <div id='recommendBox'>
+ 	<div>Recommended tags:</div>
+  	{{#collection contentBinding="Todos.labelsController" tagName="ul"}}
+    	<span class='label'>{{content.title}}</span>
+  	{{/collection}}
+  </div>
+
   {{#view Todos.StatsView id="stats"}}
     {{#view SC.Button classBinding="isActive"
       target="Todos.todosController"
@@ -46,8 +54,7 @@ <h1>Todos</h1>
         valueBinding="content.isDone"}}
   {{/collection}}
   </script>
-
-
+
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
   <script src="js/libs/sproutcore-2.0.beta.3.min.js"></script>

js/app.js

@@ -6,6 +6,22 @@ Todos.Todo = SC.Object.extend({
   isDone: false
 });
 
+Todos.Label = SC.Object.extend({
+  title: null,
+  isRelevant: false
+});
+
+Todos.labelsController = SC.ArrayProxy.create({
+	content: [],
+	recommendLabelsFor: function(todo){
+		var label = Todos.Label.create({ title: "label 1" });
+		this.pushObject(label);
+	},
+	clearLabels: function(){
+		this.set('content', []);
+	}
+});
+
 Todos.todosController = SC.ArrayProxy.create({
   content: [],
 
@@ -50,7 +66,19 @@ Todos.CreateTodoView = SC.TextField.extend({
     if (value) {
       Todos.todosController.createTodo(value);
       this.set('value', '');
+      Todos.labelsController.clearLabels();
+    }
+  },
+  keyDown: function(evt) {
+
+  	var spaceKey = 32;
+  	var value = this.get('value');
+
+    if (evt.keyCode === spaceKey) {
+    	Todos.labelsController.recommendLabelsFor(value);
     }
+
   }
+
 });