SHARE
TWEET

Untitled

a guest Jun 18th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var todoList = {  
  2.   todos: [],    
  3.   addTodo: function(todoText) {    
  4.     this.todos.push({    
  5.       todoText: todoText,    
  6.       completed: false    
  7.     });    
  8.   },    
  9.   changeTodo: function(position, todoText) {    
  10.     this.todos[position].todoText = todoText;    
  11.   },    
  12.   deleteTodo: function(position) {    
  13.     this.todos.splice(position, 1);    
  14.   },    
  15.   toggleCompleted: function(position) {    
  16.     var todo = this.todos[position];    
  17.     todo.completed=!todo.completed;    
  18.   },    
  19.   toggleAll: function() {    
  20.    var totalTodos = this.todos.length;    
  21.     var completedTodos = 0;    
  22.    this.todos.forEach (function(todo) {    
  23.    if (todo.completed===true) {    
  24.     completedTodos++      
  25. }    
  26.    });    
  27.     this.todos.forEach (function(todo) {    
  28.     if (completedTodos===totalTodos) {    
  29.     todo.completed= false    
  30.       } else {    
  31.       todo.completed= true    
  32.       }    
  33.     });    
  34.   }    
  35. };    
  36.  
  37. var handlers = {    
  38.   addTodo: function() {    
  39.     var addTodoTextInput = document.getElementById('addTodoTextInput');    
  40.     todoList.addTodo(addTodoTextInput.value);    
  41.     addTodoTextInput.value = '';    
  42.     view.displayTodos();    
  43.   },    
  44.   changeTodo: function() {    
  45.     var changeTodoPositionInput =     document.getElementById('changeTodoPositionInput');    
  46.     var changeTodoTextInput = document.getElementById('changeTodoTextInput');    
  47.     todoList.changeTodo(changeTodoPositionInput.valueAsNumber,     changeTodoTextInput.value);    
  48.     changeTodoPositionInput.value = '';    
  49.     changeTodoTextInput.value = '';    
  50.     view.displayTodos();    
  51.   },    
  52.   deleteTodo: function(position) {    
  53.     todoList.deleteTodo(position);    
  54.     view.displayTodos();    
  55.   },    
  56.   toggleCompleted: function(position) {    
  57.     todoList.toggleCompleted(position);    
  58.     view.displayTodos();    
  59.   },    
  60.   toggleAll: function() {    
  61.     todoList.toggleAll();    
  62.     view.displayTodos();    
  63.   }      
  64. };    
  65.  
  66. var view = {    
  67.   displayTodos: function() {    
  68.     var todosUl = document.querySelector('ul');    
  69.     todosUl.innerHTML = '';    
  70.     todoList.todos.forEach (function(todo, position) {    
  71.       var todoLi = document.createElement('li');    
  72.       var todoTextWithCompletion = '';    
  73.       if (todoList.todos[position].completed === true) {    
  74.         todoTextWithCompletion = '(x) ' + todo.todoText;    
  75.       } else {    
  76.         todoTextWithCompletion = '( ) ' + todo.todoText;    
  77.         todoLi.id = position;    
  78.       todoLi.textContent = todoTextWithCompletion;    
  79.       todoLi.appendChild (this.createDeleteButton());    
  80.       todoLi.appendChild (this.createToggleCompletedButton());    
  81.           todosUl.appendChild(todoLi);    
  82.       }    
  83.     }, this);    
  84.   },    
  85.   createDeleteButton: function () {    
  86.   var deleteButton= document.createElement ('button');    
  87.     deleteButton.textContent= 'Delete';    
  88.     deleteButton.className= 'deleteButton';    
  89.     return deleteButton;    
  90.   },    
  91.   createToggleCompletedButton: function () {    
  92.   var toggleButton= document.createElement ('button');    
  93.     toggleButton.textContent= 'Mark';    
  94.     toggleButton.className= 'toggleButton';    
  95.     return toggleButton;    
  96.   },    
  97.   setUpEventListeners: function () {    
  98. var todosUl= document.querySelector ('ul');    
  99. todosUl.addEventListener ('click', function(event) {    
  100. var elementClicked= event.target;    
  101.   if (elementClicked.className=== 'deleteButton') {    
  102.   handlers.deleteTodo(parseInt(elementClicked.parentNode.id));    
  103.       } else if (elementClicked.className=== 'toggleButton'){    
  104.       handlers.toggleCompleted(parseInt(elementClicked.parentNode.id));    
  105.       };    
  106.     });    
  107.   }      
  108. };    
  109. view.setUpEventListeners();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top