Activity 1

src/index.js

@@ -1,27 +1,55 @@
-function onReady () {
+let todos = [
+  // your initial todos
+  { title: 'Dishes', complete: false },
+  { title: 'Laundry', complete: false },
+  { title: 'Vacuuming', complete: false},
+  { title: 'Making the bed', complete: false},
+  { title: 'Budgeting', complete: false}
+];
+
+function createNewTodo ( title ) {
+  todos.push({
+    title,
+    complete: false,
+  });
+
+  // The "state" changed, so re-draw the UI
+  renderTheUi( todos );
+}
+
+function renderTheUi ( todos ) {
+  // TODO: using the todos, draw out the UI
   const addTodoForm = document.getElementById( 'addTodoForm' );
   const todoList = document.getElementById( 'todoList' );
   const newTodoText = document.getElementById( 'newTodoText' );
 
   // <ul></ul>
   todoList.textContent = '';
 
-  addTodoForm.addEventListener( 'submit', event => {
-    event.preventDefault();
-    const title = newTodoText.value;
-
+  for (let x = 0; x < todos.length; x++){
     // add it to the list
     // create an li
     // <li>{title}</li>
     const newLi = document.createElement( 'li' );
-    newLi.textContent = title; // vs newLi.innerHTML
+    newLi.textContent = todos[x].title; // vs newLi.innerHTML
 
     newLi.addEventListener( 'click', () => {
       newLi.classList.toggle( 'todo--complete' );
     });
-
-    // put it in the ul
     todoList.appendChild( newLi );
+  }
+}
+
+function onReady () {
+
+  // Draw the UI the first time
+  renderTheUi( todos );
+
+  addTodoForm.addEventListener( 'submit', event => {
+    event.preventDefault(); //keeps page from refreshing
+    const title = newTodoText.value;
+
+    createNewTodo(title);
 
     newTodoText.value = '';
   });
@@ -32,4 +60,3 @@ if ( document.readyState !== 'loading' ) {
 } else {
   document.addEventListener( 'DOMContentLoaded', onReady );
 }
-

static/index.html

@@ -32,4 +32,3 @@ <h1>The Todo App!</h1>
     <script src="/static/bundle.js"></script>
   </body>
 </html>
-