Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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 totalTodos = this.todos.length;
- var completedTodos = 0;
- this.todos.forEach (function(todo) {
- if (todo.completed===true) {
- completedTodos++
- }
- });
- this.todos.forEach (function(todo) {
- if (completedTodos===totalTodos) {
- todo.completed= false
- } else {
- todo.completed= true
- }
- });
- }
- };
- var handlers = {
- addTodo: function() {
- var addTodoTextInput = document.getElementById('addTodoTextInput');
- todoList.addTodo(addTodoTextInput.value);
- addTodoTextInput.value = '';
- view.displayTodos();
- },
- changeTodo: function() {
- var changeTodoPositionInput = document.getElementById('changeTodoPositionInput');
- var changeTodoTextInput = document.getElementById('changeTodoTextInput');
- todoList.changeTodo(changeTodoPositionInput.valueAsNumber, changeTodoTextInput.value);
- changeTodoPositionInput.value = '';
- changeTodoTextInput.value = '';
- 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 (todoList.todos[position].completed === true) {
- todoTextWithCompletion = '(x) ' + todo.todoText;
- } else {
- todoTextWithCompletion = '( ) ' + todo.todoText;
- todoLi.id = position;
- todoLi.textContent = todoTextWithCompletion;
- todoLi.appendChild (this.createDeleteButton());
- todoLi.appendChild (this.createToggleCompletedButton());
- todosUl.appendChild(todoLi);
- }
- }, this);
- },
- createDeleteButton: function () {
- var deleteButton= document.createElement ('button');
- deleteButton.textContent= 'Delete';
- deleteButton.className= 'deleteButton';
- return deleteButton;
- },
- createToggleCompletedButton: function () {
- var toggleButton= document.createElement ('button');
- toggleButton.textContent= 'Mark';
- toggleButton.className= 'toggleButton';
- return toggleButton;
- },
- setUpEventListeners: function () {
- var todosUl= document.querySelector ('ul');
- todosUl.addEventListener ('click', function(event) {
- var elementClicked= event.target;
- if (elementClicked.className=== 'deleteButton') {
- handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
- } else if (elementClicked.className=== 'toggleButton'){
- handlers.toggleCompleted(parseInt(elementClicked.parentNode.id));
- };
- });
- }
- };
- view.setUpEventListeners();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement