joshdmiller · matthewepler · Mar 1, 2017 · Mar 2, 2017
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,81 @@
-/**
-* Put your JavaScript here
-*/
+let state = {
+  todos: [
+    { title: 'First todo', complete: false },
+    { title: 'Second todo', complete: true },
+    { title: 'Third todo', complete: true },
+  ],
+  filtered: false
+};
+
+if (document.readyState !== 'loading') {
+  init();
+} else {
+  document.addEventListener( 'DOMContentLoaded', init() );
+}
+
+function init() {
+	const listNode = document.getElementById('list');
+  const inputForm = document.getElementById('input-form');
+  const inputBox = document.getElementById('input-box');
+  const submitButton = document.getElementById('submit-button');
+
+  inputForm.addEventListener( 'submit', (event) => {
+    event.preventDefault();
+    createNewTodo(inputBox.value);
+  })
+
+	const filterButton = document.getElementById('filter-button');
+	filterButton.addEventListener('click', (event) => {
+    state.filtered = !state.filtered;
+    state.filtered ?
+      this.textContent = "Show Completed" :
+      this.textContent = "Hide Completed";
+    const items = document.querySelectorAll('#list li.todo--complete');
+	  items.forEach( item => item.classList.toggle('hide') );
+  })
+
+  function createNewTodo ( title ) {
+    state.todos.push({
+      title,
+      complete: false 
+    })
+    renderTheUi( state.todos );
+  }
+
+  function renderTheUi ( todos ) {
+    clearList();
+    todos.forEach( item => createNewNode( item ) );
+  }
+
+  function clearList () {
+    while (listNode.firstChild) {
+        listNode.removeChild(listNode.firstChild);
+    }
+  }
+
+  function createNewNode ( todo ) {
+    const newTodo = document.createElement( 'li' );
+    newTodo.textContent = todo.title;
+    if (todo.complete === true) newTodo.classList.add('todo--complete');
+    newTodo.addEventListener( 'click', event => {
+      changeCompleteValue(event.target) 
+    })
+    listNode.appendChild(newTodo);
+  }
+
+  function changeCompleteValue ( node ) {
+    state.todos.forEach( (element, index, array) => {
+      if ( element.title === node.textContent ) {
+        array[index].complete = !array[index].complete;
+      }
+    })
+    renderTheUi( state.todos );
+  }
+
+  renderTheUi( state.todos );
+}
+
+
+
 
-console.log( 'Open the dev console to see me. :-)' );
 
diff --git a/static/index.html b/static/index.html
@@ -2,13 +2,20 @@
 <html ng-app="todoApp">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <link rel="stylesheet" href="styles.css">
     <title>Todo App</title>
   </head>
   <body ng-controller="TodoController as ctrl">
-    <h1>Welcome!</h1>
+
+  <form id="input-form">
+    <label for="input-box">Add Todo:</label>
+    <input id="input-box" type="text">
+    <button type="submit" id="submit-button">Add</button>
+  </form>
 
-    <!-- html can go here -->
+	<button id="filter-button">Hide Completed</button>
+
+	<ul id="list"></ul>
 
     <script src="/static/bundle.js"></script>
   </body>

diff --git a/static/styles.css b/static/styles.css
@@ -0,0 +1,7 @@
+.todo--complete {
+	text-decoration: line-through;
+}
+
+.hide {
+	display: none;
+}