PSJ - V3 - Plunker

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Todo List!</h1>
    <div>
      <button onclick="handlers.toggleAll()">Toggle All</button>
    </div>
    <div>
      <button onclick="handlers.addTodo()">Add</button>
      <input id="addTodoTextInput" type="text">
    </div>
    <div>
      <button onclick="handlers.changeTodo()">Change Todo</button>
      <input id="changeTodoPositionInput" type="number">
      <input id="changeTodoTextInput" type="text">
    </div>
    <div>
      <button onclick="handlers.deleteTodo()">Delete Todo</button>
      <input id="deleteTodoPositionInput" type="number">
    </div>
    <div>
      <button onclick="handlers.toggleCompleted()">Toggle Completed</button>
      <input id="toggleTodoAsCompleted" type="number">
    </div>
    
    <ul>
    </ul>
    
    <script src="script.js"></script>
  </body>

</html>

var todoList = {
  todos: [],

  addTodo: function(todoText){
    this.todos.push({
      todoText: todoText,
      completed: false
    });
  },
  changeTodo: function(position, todoText){
    this.todos[position].todoText = todoText;
  },
  deleteTodo: function(startPoint){
    this.todos.splice(startPoint,1);
  },
  toggleCompleted: function(position){
    var todo = this.todos[position];
    todo.completed = !todo.completed;
  },
  toggleAll: function(){
    var totalTodos = this.todos.length;
    var completedTodos = 0;
    
    for (var i = 0; i <totalTodos; i++){
      if (this.todos[i].completed === true){
        completedTodos++;
      }
    }
    
    if (completedTodos === totalTodos ){
      for (var i = 0; i<totalTodos; i++){
        this.todos[i].completed = false;
      }
    } else {
      for (var i = 0; i<totalTodos; i++){
        this.todos[i].completed = true;
      }
    }
  }
};


var handlers = {
  addTodo: function(){
    var newTodo = document.getElementById('addTodoTextInput');
    todoList.addTodo(newTodo.value);
    newTodo.value = '';
    view.displayTodos();
  },
  changeTodo: function(){
    var changeTodoPosition = document.getElementById('changeTodoPositionInput');
    var changeTodoText = document.getElementById('changeTodoTextInput');
    todoList.changeTodo(changeTodoPosition.valueAsNumber, changeTodoText.value);
    changeTodoPositionInput.value ='';
    changeTodoTextInput.value ='';
    view.displayTodos();
  },
  deleteTodo: function(){
    var deleteTodoPosition = document.getElementById('deleteTodoPositionInput');
    todoList.deleteTodo(deleteTodoPosition.valueAsNumber);
    deleteTodoPositionInput.value = '';
    view.displayTodos();
  },
  toggleCompleted: function(){
    var toggleTodoCompleted = document.getElementById('toggleTodoAsCompleted');
    todoList.toggleCompleted(toggleTodoCompleted.valueAsNumber);
    toggleTodoAsCompleted.value = '';
    view.displayTodos();
  },
  toggleAll: function(){
    todoList.toggleAll();
    view.displayTodos();
  }
};

var view = {
  displayTodos: function(){
    var todosUl = document.querySelector('ul');
    todosUl.innerHTML = '';
    for (var i = 0; i <todoList.todos.length; i++){
      var todoLi = document.createElement('li');
      var todo = todoList.todos[i];
      var todoTextWithCompletion = '';
      
      if (todo.completed === true){
        todoTextWithCompletion = '(x) ' + todo.todoText;
      } else {
        todoTextWithCompletion = '( ) ' + todo.todoText;
      }
      
      todoLi.textContent = todoTextWithCompletion;
      todosUl.appendChild(todoLi);
    }
  }
};

/* Styles go here */

.row {
  text-align: center;
}