docs(user-input): finished first pass chapter 3

public/docs/js/latest/guide/user-input.jade

@@ -44,10 +44,6 @@
     list. Inside TodoController, add an array with an initial list of items.  Then add a method that pushes new items
     on the array when called.
 
-    aside.is-right.
-        As with the previous example, in a production application you will separate your model out into another class
-        and inject it into TodoController.  We've omitted it here for brevity.
-
   pre.prettyprint.linenums.lang-javascript
     code.
       //ES5
@@ -71,4 +67,138 @@
         }
       }
 
+.callout.is-helpful
+  header Production Best Practice
+  p.
+      As with the previous example, in a production application you will separate your model out into another class
+      and inject it into <code>TodoController</code>.  We've omitted it here for brevity.
+
+.l-main-section
+  h2#section-display-the-list-of-todos Display the list of todos
+  p.
+    Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
+    its text to the value.
+
+  pre.prettyprint.linenums.lang-html
+    code.
+      &lt;ul&gt;
+         &lt;li *for=&quot;#todo of todos&quot;&gt;
+           {{ todo }}
+         &lt;/li&gt;
+      &lt;/ul&gt;
+
+.l-main-section
+  h2#section-add-todos-to-the-list Add todos to the list via button click
+  p.
+    Now, add a text input and a button for users to add items to the list.  As you saw above, you can create a local
+    variable reference in your template with <code>#varname</code>.  Call it <code>#todotext</code> here.
+
+  pre.prettyprint.lang-html
+    code.
+      &lt;input #todotext&gt;
+  p.
+    Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
+    it the value. Since you created a reference called <code>todotext</code>, you can get the value with
+    <code>todotext.domElement.value.</code>
+
+  pre.prettyprint.lang-html
+    code.
+        &lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
+
+  p And then create the doneTyping() method on TodoList and handle adding the todo text.
+
+  pre.prettyprint.lang-javascript
+    code.
+      doneTyping($event) {
+        if($event.which === 13) {
+          this.addTodo($event.target.value);
+          $event.target.value = null;
+        }
+      }
+.l-main-section
+  h2#section-final-code Final Code
+
+  pre.prettyprint.lang-javascript
+    code.
+      //ES5
+      function TodoList() {
+        this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+
+        this.addTodo = function(todo) {
+          this.todos.push(todo);
+        };
+
+        this.doneTyping = function($event) {
+          if($event.which === 13) {
+            this.addTodo($event.target.value);
+            $event.target.value = null;
+          }
+        }
+      }
+
+      TodoList.annotations = [
+        new angular.Component({
+          selector: "todo-list"
+        }),
+        new angular.View({
+          template:
+            '&lt;ul&gt;' +
+            '&lt;li *for="#todo of todos">' +
+            '{{ todo }}' +
+            '&lt;/li&gt;' +
+            '&lt;/ul&gt;' +
+            '&lt;input #textbox (keyup)="doneTyping($event)">' +
+            '&lt;button (click)="addTodo(textbox.domElement.value)"&gt;Add Todo&lt;/button&gt;',
+          directives: [angular.For, angular.If]
+        })
+      ];
+
+      document.addEventListener("DOMContentLoaded", function() {
+        angular.bootstrap(TodoList);
+      });
+
+  pre.prettyprint.lang-typescript
+    code.
+      //TypeScript
+      import {Component, View, bootstrap, For, If} from 'angular2/angular2';
+
+      @Component({
+        selector: 'todo-list'
+      })
+      @View({
+        template: `
+          &lt;ul&gt;
+            &lt;li *for="#todo of todos"&gt;
+              {{ todo }}
+            &lt;/li&gt;
+          &lt;/ul&gt;
+      
+          &lt;input #todotext (keyup)="doneTyping($event)"&gt;
+          &lt;button (click)="addTodo(todotext.domElement.value)"&gt;Add Todo&lt;/button&gt;
+                `,
+        directives: [For, If]
+      })
+      class TodoList {
+        todos: Array<string>;
+
+        constructor() {
+          this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+        }
+
+        addTodo(todo: string) {
+          this.todos.push(todo);
+        }
+
+        doneTyping($event) {
+          if($event.which === 13) {
+            this.addTodo($event.target.value);
+            $event.target.value = null;
+          }
+        }
+      }
+
+      bootstrap(TodoList);
+
+
+