gistfile1.txt

var todoList = {
  todos: [],
  addTodo: function(todoText) {
    this.todos.push({
      todoText: todoText,
      completed: false
    });
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText;
  },
  deleteTodo: function(position) {
    this.todos.splice(position, 1);
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
  },
  toggleAll: function() {
    var completedTodos = 0;
    var totalTodos = this.todos.length;
   /// Get number of completed todos.
   this.todos.forEach(function(todo) {
     if (todo.completed === true) {
       completedTodos++;
     }
   });    
   this.todos.forEach(function(todo) {
     /// Case1: If everything's true, make everything's false.
     if (completedTodos === totalTodos) {
      todo.completed = false;
     // Case2: Otherwise, make everything false.
     } else {
       todo.completed = true;
       }
    });
  },
  displayNoTodos: function() {
    var totalTodos = this.todos.length;
    if (totalTodos === 0) {
      document.getElementById("noTodos").textContent = 'You have no todos yet!';
    } else {
      document.getElementById("noTodos").textContent = 'Go on!';
    }
  }
};  

var handlers = {
  addTodo: function() {
    var addTodoTextInput = document.getElementById('addTodoTextInput');
    todoList.addTodo(addTodoTextInput.value);
    addTodoTextInput.value = '';
    view.displayTodos();
    todoList.displayNoTodos();
  },
  changeTodo: function(position, todoText) {
    var changeTodoTextInput = todoText;
    view.displayTodos();
  },
  deleteTodo: function(position) {
    todoList.deleteTodo(position);
    view.displayTodos();
  },
  toggleCompleted: function(position) {
    todoList.toggleCompleted(position);
    view.displayTodos();
  },
  toggleAll: function() {
    todoList.toggleAll();
    view.displayTodos();
  }  
};

var view = {
  displayTodos: function() {
    var todosUl = document.querySelector('ul');
    todosUl.innerHTML = '';
    todoList.todos.forEach(function(todo, position){
      var todoLi = document.createElement('li');
      var todoTextWithCompletion = '';

      if (todo.completed === true) {
        todoTextWithCompletion = "[ X ]"+ todo.todoText;
      } else {
        todoTextWithCompletion = "[ ] " + todo.todoText;  
      } 
      todoLi.id = position;
      todoLi.textContent = todoTextWithCompletion;
      todoLi.appendChild(this.createChangeButton(position));
      todoLi.appendChild(this.createToggleButton());
      todoLi.appendChild(this.createDeleteButton());
      todosUl.appendChild(todoLi);
    }, this);

    todoList.displayNoTodos();
  },
  createToggleButton: function() {
    var toggleButton = document.createElement("button");
    toggleButton.textContent = "Completed";
    toggleButton.className = "toggleButton";
    return toggleButton;
  },
  createDeleteButton: function() {
    var deleteButton = document.createElement("button");
    deleteButton.textContent = "Delete";
    deleteButton.className = "deleteButton";
    return deleteButton;
  },
  createChangeButton: function(position){
    var changeButton = document.createElement("button");
    changeButton.textContent = "Edit";
    changeButton.className = "changeButton";
    changeButton.id = position;
    return changeButton;
  },
  /*change button text --> becomes save*/
  changeButtonText: function(position) {
    var button = document.getElementsByClassName("changeButton")[position]
    button.innerHTML = 'Save';
  },
  setUpEventListeners: function() {
    // Execute a function when the user releases a key on the keyboard
    addTodoTextInput.addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        document.getElementById("addButton").click();
      }
    });

    var todosUl = document.querySelector("ul");

    todosUl.addEventListener("click", function(event) {
    // Get the element that was clicked on
    var elementClicked = event.target;

    // Check if element clicked is the delete button
    if (elementClicked.className === "deleteButton") {
      // Run handlers.deleteTodo(position)
      handlers.deleteTodo(parseInt(elementClicked.parentNode.id));                  
      // parseInt turn string into number (id is a string, position is a number 
      } 
    var addTodoTextInput = document.getElementById('addTodoTextInput');
    if (elementClicked.className === "changeButton") {
      // Run handlers.changeTodo(position)
      handlers.changeTodo(parseInt(elementClicked.parentNode.id));  
      // parseInt turn string into number (id is a string, position is a number 

      //TodoTextInput becomes editable    
      handlers.changeTodo(addTodoTextInput.contentEditable = true);
      view.changeButtonText(elementClicked.id);
    } else {  /* if change button is not clicked */
      handlers.changeTodo(parseInt(elementClicked.parentNode.id));
      handlers.changeTodo(addTodoTextInput.contentEditable = false);
    }
    if (elementClicked.className === "toggleButton") {
      // Run handlers.toggleTodo(position)
      handlers.toggleCompleted(parseInt(elementClicked.parentNode.id));                  
      // parseInt turn string into number (id is a string, position is a number 
      }
    })
  }
}

todoList.displayNoTodos();
view.setUpEventListeners();