Changes made following issues

Relates #9 #10 #12 #14 #25 #29 #5

dom.js

@@ -27,22 +27,27 @@
     todoNode.appendChild(newSpan);
 
     /* this adds the delete button     */
-    var deleteButtonNode = document.createElement('button');
+    var deleteButtonNode = document.createElement("button");
     deleteButtonNode.setAttribute("class", "delete-button");
-    deleteButtonNode.innerHTML = 'x';
-    deleteButtonNode.addEventListener('click', function(event) {
+    deleteButtonNode.innerHTML = "❌";
+    deleteButtonNode.addEventListener("click", function(event) {
       var newState = todoFunctions.deleteTodo(state, todo.id);
       update(newState);
     });
     todoNode.appendChild(deleteButtonNode);
 
-
     // add markTodo button
     var markTodoButtonNode = document.createElement("button");
     markTodoButtonNode.setAttribute("class", "mark-button");
-    if (todo.done == false) {markTodoButtonNode.setAttribute('style', 'background-color: #2f537d;')}
-    if (todo.done == true) {markTodoButtonNode.innerText = 'v'}
-    if (todo.done == true) {markTodoButtonNode.setAttribute('style', 'background-color: green;')}
+    if (todo.done == false) {
+      markTodoButtonNode.setAttribute("style", "background-color: #2f537d;");
+    }
+    if (todo.done == true) {
+      markTodoButtonNode.innerText = "✅";
+    }
+    if (todo.done == true) {
+      markTodoButtonNode.setAttribute("style", "background-color: green;");
+    }
     markTodoButtonNode.addEventListener("click", function(event) {
       var newState = todoFunctions.markTodo(state, todo.id);
       // markTodoButtonNode.innerHTML = 'test'

logic.js

@@ -2,7 +2,6 @@
 // you can access these on todo.todoFunctions
 // For part one we expect you to use tdd
 
-
 /* USED FOR TESTING
 var todos = [
   {id: 0, description: 'make tea', done: true},
@@ -32,72 +31,57 @@ var todoFunctions = {
   //cloneArrayOfObjects will create a copy of the todos array
   //changes to the new array don't affect the original
   cloneArrayOfObjects: function(todos) {
-    return todos.map(function(todo){
+    return todos.map(function(todo) {
       return JSON.parse(JSON.stringify(todo));
     });
   },
 
   addTodo: function(todos, newTodo) {
-      var newTodos = todoFunctions.cloneArrayOfObjects(todos)
-      newTodos.push({
-        description: document.getElementsByName('description')[0].value,
-        done: false,
-        id: todoFunctions.generateId(),
-      })
-      return newTodos
+    var newTodos = todoFunctions.cloneArrayOfObjects(todos);
+    newTodos.push({
+      description: document.getElementsByName("description")[0].value,
+      done: false,
+      id: todoFunctions.generateId()
+    });
+    return newTodos;
     // should leave the input argument todos unchanged (you can use cloneArrayOfObjects)
     // returns a new array, it should contain todos with the newTodo added to the end.
     // add an id to the newTodo. You can use the generateId function to create an id.
     // hint: array.concat
   },
 
   deleteTodo: function(todos, idToDelete) {
-
     var newTodos = todoFunctions.cloneArrayOfObjects(todos);
     for (let x = 0; x < newTodos.length; x++) {
       if (newTodos[x].id == idToDelete) {
-        newTodos.splice(x, 1)
+        newTodos.splice(x, 1);
       }
     }
-    return newTodos
-
-    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
-    const result = words.filter(word => word.length > 6);
-
+    return newTodos;
   },
 
   markTodo: function(todos, idToMark) {
     var newTodos = todoFunctions.cloneArrayOfObjects(todos);
     for (let item of newTodos) {
       if (item.id == idToMark) {
-        if (item.done == false) {
-          item.done = true
-        }
-        else if (item.done == true) {
-          item.done = false
-        }
-      } else {
-        continue;
+        item.done ? (item.done = false) : (item.done = true);
       }
-      console.log(newTodos);
     }
     return newTodos;
   },
 
-
   sortTodos: function(todos, sortFunction) {
     // stretch goal! Do this last
     // should leave the input arguement todos unchanged (you can use cloneArrayOfObjects)
     // sortFunction will have same signature as the sort function in array.sort
     // hint: array.slice, array.sort
-  },
+  }
 };
 
-
 // Why is this if statement necessary?
 // The answer has something to do with needing to run code both in the browser and in Node.js
 // See this article for more details:
 // http://www.matteoagosti.com/blog/2013/02/24/writing-javascript-modules-for-both-browser-and-node/
-if (typeof module !== 'undefined') {
+if (typeof module !== "undefined") {
   module.exports = todoFunctions;
 }

style.css

@@ -1,6 +1,7 @@
 /* ENTIRE FORM */
 html {
   font-family: "Raleway", sans-serif;
+  min-width: 300px;
 }
 /*orange - e86742
 blue - 2f537d
@@ -35,10 +36,15 @@ body {
   background: none;
   padding: 3px;
   border: 2px #f5af41 solid;
+  font-family: "Raleway", sans-serif;
 }
 
 #input-field:focus {
-  outline: 0; /* avoids blue shadow when clicking on button */
+  outline: 1px #e86742;
+  border: 1px solid #e86742 !important;
+  box-shadow: 0 0 3px #e86742 !important;
+  -moz-box-shadow: 0 0 3px #e86742 !important;
+  -webkit-box-shadow: 0 0 3px #e86742 !important;
 }
 
 @media (max-width: 500px) {
@@ -116,7 +122,7 @@ body {
   background: none;
   color: #f5af41;
   border: 2px #f5af41 solid;
-  background-color:
+  background-color: ;
 }
 
 #todo-block {