20180530a_PJS_objects-debugger.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Todo List</h1>
      <button id="displayTodosButton"> Display Todos </button>
      <button id = 'toggleAllButton' >Toggle All </button>
  </body>
    
    
    <script>
    // Code goes here

//make a change
//v7     
//1    
var todoList={
  todos:[],
  displayTodos: function(){
    //debugger;
      //if there are no todos, (todos.length is equal to 0, ===0) console.log('your todo list is empty');
      if(this.todos.length===0){
          console.log("there is no todo");
      } else {
        console.log("My Todos:"); //remove ', this.todos'
        for(var i=0;i<this.todos.length;i++){
          
            if (this.todos[i].completed===true){
                console.log('(X)',this.todos[i].todoText);
            } else{
                console.log('( )',this.todos[i].todoText);
            }
        }
      }
  },
    addTodo:function(todoText){
    //debugger;
    this.todos.push({
        todoText:todoText,
        completed:false
    });  //defined earlier
    this.displayTodos();    // defined earlier
  },
  
    changeTodo: function(position, newValue){
        //debugger;
        this.todos[position]=newValue;
        this.displayTodos();
    },
    
    deleteTodo: function(position){
        //debugger;
        this.todos.splice(position, 1);
        this.displayTodos();
    },
    
    toggleCompleted: function(position){
    //debugger;
    var todo=this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();    
    },
    
    toggleAll: function(){
        debugger;
        var totalTodos = this.todos.length;
        var completedTodos = 0;
    
        //get number of completed todos
        for (var i=0; i<totalTodos;i++){
            if(this.todos[i].completed ===true){
            completedTodos++;
            }
        }
        //if everything's true, make everything false
        if(completedTodos === totalTodos){
         // make everything false
            for(var i=0; i<totalTodos; i++){
                this.todos[i].completed = false;
            }
        } //case2: otherwise make everything tru
            else {
            for(var i=0; i<totalTodos;i++){
                this.todos[i].completed = true;
            }
        }
        
        this.displayTodos();
    
    }
    
};

//function changeTodo(position, newValue){
//  todos[position]= new Value;
//  displayTodos();
//}
        
//1.we want to get access to the display todos button

var displayTodosButton = document.getElementById('displayTodosButton'); 
var toggleAllButton = document.getElementById('toggleAllButton'); 

//console.log(displayTodosButton);

//2. we want to run displayTodos method, when someone clicks the display todos button

displayTodosButton.addEventListener('click', function(){
    todoList.displayTodos();
});
        
toggleAllButton.addEventListener('click', function (){
    todoList.toggleAll();
})
        


</script>

</html>
