Suggested changes implemented

package.json

@@ -17,7 +17,8 @@
   "license": "MIT",
   "dependencies": {
     "babel-preset-es2015": "^6.13.2",
-    "babel-preset-stage-0": "^6.5.0"
+    "babel-preset-stage-0": "^6.5.0",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "babel-loader": "^6.2.10",

src/Todo.js

@@ -0,0 +1,55 @@
+'use strict';
+
+module.exports = class Todo {
+  constructor ( todo ) {
+      if(typeof(todo)=='string'){
+        this.title = todo;
+        this.complete=false;
+        let myId=this.getTitle();
+        myId=myId.toLowerCase();
+        myId=myId.replace(/\s/g,'-');
+        this.setId(myId);
+
+      }else{
+        this.title = todo.title;
+        if(todo.hasOwnProperty("complete")){
+            this.complete=todo.complete;
+        }else{
+            this.complete=false;
+        }
+        if(todo.hasOwnProperty("id")){
+            this.id=todo.id;
+        }else{
+            let myId=this.getTitle();
+            myId=myId.toLowerCase();
+            myId=myId.replace(/\s/g,'-');
+            this.setId(myId);
+        }
+      }
+  }
+
+  getTitle () {
+    return this.title;
+  }
+  setTitle(title){
+    this.title=title;
+    return this.title;
+  }
+  setId(id){
+    this.id=id;
+    return this.id;
+  }
+  getId () {
+    return this.id;
+  }
+  isComplete(){
+      return this.complete;
+  }
+  toggleComplete(){
+      if(this.isComplete()){
+          this.complete=false;
+      }else{
+          this.complete=true;
+      }
+  }
+};

src/index.js

@@ -1,35 +1,60 @@
-function onReady () {
-  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;
-
-    // add it to the list
-    // create an li
-    // <li>{title}</li>
-    const newLi = document.createElement( 'li' );
-    newLi.textContent = title; // vs newLi.innerHTML
-
-    newLi.addEventListener( 'click', () => {
-      newLi.classList.toggle( 'todo--complete' );
-    });
+let Todo = require('./Todo.js');
+
+let state = {
+  todos: {}
+};
 
-    // put it in the ul
-    todoList.appendChild( newLi );
+let todoList;
+let todoForm;
+let todoText;
+let showState;
 
-    newTodoText.value = '';
-  });
+if(document.readyState!=='loading'){
+    onReady();
+}else{
+    document.addEventListener('DOMContentLoaded',onReady);
 }
 
-if ( document.readyState !== 'loading' ) {
-  onReady();
-} else {
-  document.addEventListener( 'DOMContentLoaded', onReady );
+function onReady(){
+    todoList = document.getElementById('todolist');
+    todoForm=document.getElementById('todoform');
+    todoText=document.getElementById('todotext');
+    showState=document.getElementById('showstate');
+
+    AddEvents();
+    MakeTodoList(state);
 }
 
+function AddEvents(){
+    showState.addEventListener('click',event=>{
+        alert(JSON.stringify(state));
+    });
+
+    todoForm.addEventListener('submit',event=>{
+        event.preventDefault();
+        let todo=new Todo({title:todoText.value});
+        state.todos[todo.getId()]=todo;
+        AddItem(todo);
+        todoText.value='';
+    });
+}
+
+function MakeTodoList(state){
+    let taskIds=Object.keys(state.todos);
+    taskIds.forEach(task=>{
+        AddItem(state.todos[task]);
+    });
+}
+
+function AddItem(task){
+    let linode = document.createElement("li");
+    linode.textContent=`${task.title}`;
+    linode.setAttribute('id',task.getId());
+    if(task.complete){linode.setAttribute('class','todo--complete')}                       
+    linode.addEventListener('click',()=>{
+        linode.classList.toggle('todo--complete');
+        state.todos[task.getId()].toggleComplete();
+
+    });
+    todoList.appendChild(linode);
+}

src/spec.js

@@ -0,0 +1,59 @@
+
+import test from 'tape';
+import Todo from './Todo';
+
+test( 'Todo', t => {
+  let actual, expected, todo;
+  let testTodo = {
+    id: 'test',
+    title: 'Test',
+    complete: true,
+  };
+
+  todo = new Todo( testTodo ); // use new if using a constructor
+
+  actual = todo.getId();
+  expected = testTodo.id;
+  t.equal( actual, expected, 'with object, should store the id' );
+
+  actual = todo.getTitle();
+  expected = testTodo.title;
+  t.equal( actual, expected, 'with object, should store the title' );
+
+  actual = todo.isComplete();
+  expected = testTodo.complete;
+  t.equal( actual, expected, 'with object, should store the completion' );
+
+  todo = new Todo( 'Test' ); // use new if using a constructor
+
+  actual = typeof todo.getId();
+  expected = 'string';
+  t.equal( actual, expected, 'with title, should generate an id' );
+
+  actual = todo.getTitle();
+  expected = 'Test';
+  t.equal( actual, expected, 'with title, should store the title' );
+
+  actual = todo.isComplete();
+  expected = false;
+  t.equal( actual, expected, 'with title, should default to not complete' );
+
+  todo = new Todo( 'Test' ); // use new if using a constructor
+  todo.toggleComplete();
+  actual = todo.isComplete();
+  expected = true;
+  t.equal( actual, expected, 'toggleComplete should complete uncompleted todos' );
+
+  todo.toggleComplete();
+  actual = todo.isComplete();
+  expected = false;
+  t.equal( actual, expected, 'toggleComplete should uncomplete completed todos' );
+
+  todo = new Todo( 'Test' ); // use new if using a constructor
+  todo.setTitle( 'New' );
+  actual = todo.getTitle();
+  expected = 'New';
+  t.equal( actual, expected, 'setTitle should change the title' );
+
+  t.end();
+});

static/css/index.css

@@ -0,0 +1,3 @@
+.todo--complete{
+    text-decoration:line-through;
+}

static/index.html

@@ -2,33 +2,23 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <link rel="stylesheet" href="css/index.css" type="text/css">
     <title>Todo App</title>
-    <style>
-      /**
-       * Block-Element-Modifer (BEM)
-       */
-      .todo--complete {
-        text-decoration: line-through;
-      }
-    </style>
   </head>
   <body>
-    <h1>The Todo App!</h1>
-
-    <form id="addTodoForm">
-      <label for="newTodoText">New Todo:</label>
-      <input type="text" id="newTodoText" />
-      <button type="submit">Add Todo!</button>
-    </form>
-
-    <button id="toggleBtn">Toggle Filter</button>
-
-    <ul id="todoList">
-      <!-- todo items go here -->
-      <li>Loading...</li>
-    </ul>
+    <div>
+      <form id="todoform">
+        <label for="todotext">New todo:</label> <input type="text" name="todotext" id="todotext"> <button type="submit">Add</button>
+      </form>
+    </div>
+
+    <div>
+      <ul id="todolist"></ul>
+    </div>
 
+    <div>
+      <button id="showstate">Show State</button>
+    </div>
     <script src="/static/bundle.js"></script>
   </body>
 </html>