Cacher is the code snippet organizer for pro developers

// Version 9
// Reqs
// 1. There should be an li element for every todo
// 2. Each li element should contain .todoText
// 3. Each li element shoud show .completed

// 1. There should be an li element for every todo
// add <ul></ul> to html
// add view object to .js file
//object to display todos array to the screen
var view = {
  displayTodos: function(){
    var todosUl = document.querySelector('ul'); //select the <ul> in the html
    todosUl.innerHTML = ''; //reset list to blank each time before displaying todos 
    //loop thru the todos from the todoList object above and create an <li> for each one and append to the <ul>
    for (var i=0;i<todoList.todos.length;i++){
      var todoLi = document.createElement('li');
      todosUl.appendChild(todoLi);
    }
  }  
};

// 2. Each li element should contain .todoText
// Add: todoLi.innerHTML = todoList.todos[i].todoText;
for (var i=0;i<todoList.todos.length;i++){
      var todoLi = document.createElement('li');
      todoLi.textContent = todoList.todos[i].todoText;//WE ADDED .todoText HERE
      todosUl.appendChild(todoLi); 
    }
    
// 3. Each li element shoud show .completed
//
for (var i=0;i<todoList.todos.length;i++){
      var todoLi = document.createElement('li');
      //new stuff starts here
      var todoCompletionCheck = '';
      var todo = todoList.todos[i];
      if (todo.completed === false){
          todoCompletionCheck = '( ) ';
        } else {
          todoCompletionCheck = '(x) ';
        }
      todoLi.textContent = todoCompletionCheck + todo.todoText;   
      //new stuff ends here
      todosUl.appendChild(todoLi);
    }
    
// Version 10
// Reqs
// 1. There should be a way to create delete buttons
// 2. There should be a delete button for each todo
// 3. Each <li> should have an id that has the todo position
// 4. Delete buttons should have access to the todo id
// 5. Clicking delete should update todoList.todos and the DOM

// 1. There should be a way to create delete buttons
// add this new item to the view object:
createDeleteButton: function(){
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.className = 'deleteButton';
    return deleteButton;
  }
// test in console:
// >view.createDeleteButton()
// you should get: <button class="deleteButton">Delete</button>
  
// 2. There should be a delete button for each todo
// add: todoLi.appendChild(this.createDeleteButton());
todoLi.textContent = todoTextWithCompletion;
//here
todosUl.appendChild(todoLi);

// 4. Delete buttons should have access to the todo id
// Add a single event listener to the <ul>, as opposed to an event listener for each <li> which would potentially cause memory problems with having so many listeners. *** This is called EVENT DELEGATION
// This event listener (todosUl.addEventListener('click', function(event){...}); will have an 'event' associated with it "function(event)" and the 'event' has many properties associated with it that can be accessed. The important property for us is the target: button.deleteButton property
// But the buttons don't have the ids on them, the <li>s do, and the <li>s are the parent to the button. So we will use the parentNode propery.

var todosUl = document.querySelector('ul');
todosUl.addEventListener('click', function(event){
  console.log(event.target.parentNode.id);
});

// 5. Clicking delete should update todoList.todos and the DOM
// Add to view object:
setUpEventListeners: function(){
    var todosUl = document.querySelector('ul');
    todosUl.addEventListener('click', function(event){
  
      //Get the element that was clicked
      var elementClicked = event.target

      //Check if element clicked was the delete button
      if (elementClicked.className === 'deleteButton'){
        var deletePosition = parseInt(elementClicked.parentNode.id);
        handlers.deleteTodo(deletePosition);
      }
    });
  }

// Then call it
view.setUpEventListeners();
// Edit handlers.deleteTodo
  deleteTodo: function(position) {
    // Delete these lines for v10: removing manual delete and adding delete button for each todo
    // var deleteTodoPositionInput = document.getElementById('deleteTodoPositionInput');
    // todoList.deleteTodo(deleteTodoPositionInput.valueAsNumber);
    // deleteTodoPositionInput.value = '';
    // Add these lines:
    todoList.deleteTodo(position)
    view.displayTodos();
  },
  
  // Version 11
// Reqs
// 1. todoList.toggleAll shoud use forEach
// 2. view.displayTodos should use forEach

// 1. todoList.toggleAll shoud use forEach
    // Change for loop in to forEach
    // for (var i = 0; i < totalTodos; i++) {
    //   if (this.todos[i].completed === true) {
    //     completedTodos++;
    //   }
    // }
    this.todos.forEach(function(todo){
      if (todo.completed === true) {
         completedTodos++;
      }
    });
    
// 2. view.displayTodos should use forEach
// Add ", this" to the end of the callback function parameters so that the "this" in the line: todoLi.appendChild(this.createDeleteButton()); will refer correctly back to the view object.