Todo app example

App.js

// Todoapp using Localstorage


/*global window */
/*global document */

(function () {
	"use strict";
	window.todoApp = {
		addTodoBtn: document.getElementById("addTodo"),
		todoInput: document.getElementById("todoInput"),
		todosList: document.getElementById("todosList"),
		activeItem: false,
		// INIT FUNCTION CALLING CALLING TWO FUNCTIONS GETTING ALL TODOS FROM DATASOURCE AND ATTACHING EVENT THE INPUT FIELD
		initialize: function () {
			this.getAllTodos();
			this.todoInputEvents();
		},
		// THE EVENTS ASSOCIATED WITH A THE INPUT FIELD FOR ADDING TODOS
		todoInputEvents: function () {
			var submitFunc = function () {
				if (window.todoApp.todoInput.value !== "") {
					var todoItem = {
							title: window.todoApp.todoInput.value,
							completed: false
						};

					window.todoApp.todoInput.value = "";

					if (window.todoApp.todoInput.className === "editing") {
						window.todoApp.updateTodo(todoItem);
					} else {
						window.todoApp.addTodo(todoItem);
					}
				}

			}
			this.addTodoBtn.onclick = submitFunc;
			this.todoInput.onfocus = function () {
				this.onkeyup = function () {
					if (event.keyCode == 13) {
						submitFunc();
					}
				};
			};

			this.todoInput.onblur = function () {

				if (this.className === "editing") {
					this.value = "";
					var editingTarget = document.getElementsByClassName("editingTarget");
					if (editingTarget.length) {
						editingTarget[0].className = ""	
					}
					window.todoApp.addTodoBtn.textContent = "Add";
					window.todoApp.activeItem = false;
				}

				this.className = "";
			}
		},

		// THE EVENTS ASSOCIATED WITH A TODO LIST ITEM
		todoItemsEvents: function () {
			var removeItemBtn = this.todosList.getElementsByClassName("removeItem");
			if (removeItemBtn.length) {
				var itemCount = 0;
				for(var i = 0; i<removeItemBtn.length; i++){

					 (function(index){
				        removeItemBtn[i].onclick = function(){
						window.todoApp.deleteTodo(index);
				        
				        }
				    })(i);

					itemCount++;
				}	
			}			

			var checkboxs = this.todosList.getElementsByClassName("toggleCompleted");
			for(i in checkboxs){
				(function(index){
			        checkboxs[i].onclick = function(){
						var localTodos = JSON.parse(localStorage.getItem("Todos"));
						var selectedItem = localTodos[index];
						if (this.checked){
							selectedItem.completed = true;
							this.parentElement.parentElement.className = "completed";
							this.disabled = "disabled";
						} else {
							selectedItem.completed = false;
							this.parentElement.parentElement.className = "";	
						}
						
					localStorage.setItem("Todos", JSON.stringify(localTodos));
					}
			    })(i);
			}

			var items = this.todosList.getElementsByClassName("title");
			for(var i = 0; i<items.length; i++){
				(function(index){
				    var parentElem = items[i].parentElement;
				    if (items[i].parentElement.attributes[0].value !== "completed"){
				    	items[i].onclick = function(){
							var titleText = this.textContent;
							window.todoApp.activeItem = index;
							this.parentElement.className = "editingTarget";
							window.todoApp.addTodoBtn.textContent = "Update";
							todoInput.value = titleText;
							todoInput.className = "editing";
							todoInput.focus();
							todoInput.select();
						}
				    }
			    })(i);
			}
		},
		// LOAD ALL ITEMS FROM LOCALSTORAGE DATASOURCE
		getAllTodos: function () {
			// load todo items from using the "Todos" key as datasource. Parse to JSON to have an object to work with
			var localTodos = JSON.parse(localStorage.getItem("Todos"));
			if (localTodos !== null){
				var todosCollection = [];
				
				for (var i = 0; i<localTodos.length; i++){
					var completed = (localTodos[i].completed) ? "checked disabled" : "";
					var newTodoItem = document.createElement("li");
					newTodoItem.className = (localTodos[i].completed) ? "completed" : "";
					newTodoItem.id = "todo"+i
					newTodoItem.innerHTML = '<span class="checkboxWrap"><input type="checkbox" class="toggleCompleted" ' + completed + '></span><div class="title">'+localTodos[i].title+'</div><span class="removeItem">Remove</span>';
					todosList.appendChild(newTodoItem);
				}


				this.todoItemsEvents();
			}
		},
		// ADD TODO BASED IN THE INPUT ENTERED
		addTodo: function(todo) {
			var localTodos = JSON.parse(localStorage.getItem("Todos")),
				itemCount = 0;
			if (localTodos === null){
				localTodos = [];
			}
			itemCount = localTodos.length;
			localTodos.push(todo);
			localStorage.setItem("Todos", JSON.stringify(localTodos));
			var newTodoItem = document.createElement("li");
			newTodoItem.id = "todo"+itemCount;
			newTodoItem.innerHTML = '<span class="checkboxWrap"><input type="checkbox" class="toggleCompleted" ></span><div class="title">'+todo.title+'</div><span class="removeItem">Remove</span>';
			todosList.appendChild(newTodoItem);
			this.todoItemsEvents();
		},

		// DELETE SELECTED TODO
		deleteTodo: function (id) {
			var localTodos = JSON.parse(localStorage.getItem("Todos"));
			localTodos.splice(id, 1);
			var listItem = this.todosList.getElementsByTagName("li")[id];
			this.todosList.removeChild(listItem);
			localStorage.setItem("Todos", JSON.stringify(localTodos));
			this.todoItemsEvents();
		},
		
		// UPDATING ACTIVE TODO
		updateTodo: function (todo) {
			var localTodos = JSON.parse(localStorage.getItem("Todos")),
				title = this.todosList.getElementsByTagName("li")[window.todoApp.activeItem].getElementsByClassName('title'),
				editingTarget = document.getElementsByClassName("editingTarget");
			localTodos[window.todoApp.activeItem] = todo;
			localStorage.setItem("Todos", JSON.stringify(localTodos));
			title[0].textContent = todo.title;
			if (editingTarget.length){
				editingTarget[0].className = "";
			}
			this.todoInput.className = "";
			this.addTodoBtn.textContent = "Add";
			this.activeItem = false;
		}
	}

	todoApp.initialize();

})();