VanillaJS: Code Style

vanilla-examples/vanillajs/js/app.js

-(function() {
+(function () {
 	'use strict';
 
 	var todos = [],
 		stat = {},
 		ENTER_KEY = 13;
 
-	window.addEventListener( 'load', windowLoadHandler, false );
+	window.addEventListener('load', windowLoadHandler, false);
 
-	function Todo( title, completed ) {
+	function Todo(title, completed) {
 		this.id = getUuid();
 		this.title = title;
 		this.completed = completed;
@@ -26,48 +26,48 @@
 	}
 
 	function addEventListeners() {
-		document.getElementById('new-todo').addEventListener( 'keypress', newTodoKeyPressHandler, false );
-		document.getElementById('toggle-all').addEventListener( 'change', toggleAllChangeHandler, false );
+		document.getElementById('new-todo').addEventListener('keypress', newTodoKeyPressHandler, false);
+		document.getElementById('toggle-all').addEventListener('change', toggleAllChangeHandler, false);
 	}
 
-	function inputEditTodoKeyPressHandler( event ) {
+	function inputEditTodoKeyPressHandler(event) {
 		var inputEditTodo = event.target,
 			trimmedText = inputEditTodo.value.trim(),
-			todoId = event.target.id.slice( 6 );
+			todoId = event.target.id.slice(6);
 
-		if ( trimmedText ) {
-			if ( event.keyCode === ENTER_KEY ) {
-				editTodo( todoId, trimmedText );
+		if (trimmedText) {
+			if (event.keyCode === ENTER_KEY) {
+				editTodo(todoId, trimmedText);
 			}
 		} else {
-			removeTodoById( todoId );
+			removeTodoById(todoId);
 			refreshData();
 		}
 	}
 
-	function inputEditTodoBlurHandler( event ) {
+	function inputEditTodoBlurHandler(event) {
 		var inputEditTodo = event.target,
-			todoId = event.target.id.slice( 6 );
+			todoId = event.target.id.slice(6);
 
-		editTodo( todoId, inputEditTodo.value );
+		editTodo(todoId, inputEditTodo.value);
 	}
 
-	function newTodoKeyPressHandler( event ) {
-		if ( event.keyCode === ENTER_KEY ) {
-			addTodo( document.getElementById('new-todo').value );
+	function newTodoKeyPressHandler(event) {
+		if (event.keyCode === ENTER_KEY) {
+			addTodo(document.getElementById('new-todo').value);
 		}
 	}
 
-	function toggleAllChangeHandler( event ) {
-		for ( var i in todos ) {
-			todos[ i ].completed = event.target.checked;
+	function toggleAllChangeHandler(event) {
+		for (var i in todos) {
+			todos[i].completed = event.target.checked;
 		}
 
 		refreshData();
 	}
 
-	function spanDeleteClickHandler( event ) {
-		removeTodoById( event.target.getAttribute('data-todo-id') );
+	function spanDeleteClickHandler(event) {
+		removeTodoById(event.target.getAttribute('data-todo-id'));
 		refreshData();
 	}
 
@@ -76,59 +76,59 @@
 		refreshData();
 	}
 
-	function todoContentHandler( event ) {
+	function todoContentHandler(event) {
 		var todoId = event.target.getAttribute('data-todo-id'),
-			div = document.getElementById( 'li_' + todoId ),
-			inputEditTodo = document.getElementById( 'input_' + todoId );
+			div = document.getElementById('li_' + todoId),
+			inputEditTodo = document.getElementById('input_' + todoId);
 
 		div.className = 'editing';
 		inputEditTodo.focus();
 	}
 
-	function checkboxChangeHandler( event ) {
+	function checkboxChangeHandler(event) {
 		var checkbox = event.target,
-			todo = getTodoById( checkbox.getAttribute('data-todo-id') );
+			todo = getTodoById(checkbox.getAttribute('data-todo-id'));
 
 		todo.completed = checkbox.checked;
 		refreshData();
 	}
 
 	function loadTodos() {
-		if ( !localStorage.getItem('todos-vanillajs') ) {
-			localStorage.setItem( 'todos-vanillajs', JSON.stringify([]) );
+		if (!localStorage.getItem('todos-vanillajs')) {
+			localStorage.setItem('todos-vanillajs', JSON.stringify([]));
 		}
 
-		todos = JSON.parse( localStorage.getItem('todos-vanillajs') );
+		todos = JSON.parse(localStorage.getItem('todos-vanillajs'));
 	}
 
-	function addTodo( text ) {
+	function addTodo(text) {
 		var trimmedText = text.trim();
 
-		if ( trimmedText ) {
-			var todo = new Todo( trimmedText, false );
-			todos.push( todo );
+		if (trimmedText) {
+			var todo = new Todo(trimmedText, false);
+			todos.push(todo);
 			refreshData();
 		}
 	}
 
-	function editTodo( todoId, text ) {
+	function editTodo(todoId, text) {
 		var i, l;
 
-		for ( i = 0, l = todos.length; i < l; i++ ) {
-			if ( todos[ i ].id === todoId ) {
-				todos[ i ].title = text;
+		for (i = 0, l = todos.length; i < l; i++) {
+			if (todos[i].id === todoId) {
+				todos[i].title = text;
 			}
 		}
 
 		refreshData();
 	}
 
-	function removeTodoById( id ) {
+	function removeTodoById(id) {
 		var i = todos.length;
 
-		while ( i-- ) {
-			if ( todos[ i ].id === id ) {
-				todos.splice( i, 1 );
+		while (i--) {
+			if (todos[i].id === id) {
+				todos.splice(i, 1);
 			}
 		}
 	}
@@ -136,20 +136,20 @@
 	function removeTodosCompleted() {
 		var i = todos.length;
 
-		while ( i-- ) {
+		while (i--) {
 			console.log(i);
-			if ( todos[ i ].completed ) {
-				todos.splice( i, 1 );
+			if (todos[i].completed) {
+				todos.splice(i, 1);
 			}
 		}
 	}
 
-	function getTodoById( id ) {
+	function getTodoById(id) {
 		var i, l;
 
-		for ( i = 0, l = todos.length; i < l; i++ ) {
-			if ( todos[ i ].id === id ) {
-				return todos[ i ];
+		for (i = 0, l = todos.length; i < l; i++) {
+			if (todos[i].id === id) {
+				return todos[i];
 			}
 		}
 	}
@@ -163,7 +163,7 @@
 	}
 
 	function saveTodos() {
-		localStorage.setItem( 'todos-vanillajs', JSON.stringify( todos ) );
+		localStorage.setItem('todos-vanillajs', JSON.stringify(todos));
 	}
 
 	function computeStats() {
@@ -172,8 +172,8 @@
 		stat = new Stat();
 		stat.totalTodo = todos.length;
 
-		for ( i = 0, l = todos.length; i < l; i++ ) {
-			if ( todos[ i ].completed ) {
+		for (i = 0, l = todos.length; i < l; i++) {
+			if (todos[i].completed) {
 				stat.todoCompleted++;
 			}
 		}
@@ -192,59 +192,59 @@
 		ul.innerHTML = '';
 		document.getElementById('new-todo').value = '';
 
-		for ( i = 0, l = todos.length; i < l; i++ ) {
-			todo = todos[ i ];
+		for (i = 0, l = todos.length; i < l; i++) {
+			todo = todos[i];
 
 			// create checkbox
 			checkbox = document.createElement('input');
 			checkbox.className = 'toggle';
-			checkbox.setAttribute( 'data-todo-id', todo.id );
+			checkbox.setAttribute('data-todo-id', todo.id);
 			checkbox.type = 'checkbox';
-			checkbox.addEventListener( 'change', checkboxChangeHandler );
+			checkbox.addEventListener('change', checkboxChangeHandler);
 
 			// create div text
 			label = document.createElement('label');
-			label.setAttribute( 'data-todo-id', todo.id );
-			label.appendChild( document.createTextNode( todo.title ) );
-			label.addEventListener( 'dblclick', todoContentHandler );
+			label.setAttribute('data-todo-id', todo.id);
+			label.appendChild(document.createTextNode(todo.title));
+			label.addEventListener('dblclick', todoContentHandler);
 
 
 			// create delete button
 			deleteLink = document.createElement('button');
 			deleteLink.className = 'destroy';
-			deleteLink.setAttribute( 'data-todo-id', todo.id );
-			deleteLink.addEventListener( 'click', spanDeleteClickHandler );
+			deleteLink.setAttribute('data-todo-id', todo.id);
+			deleteLink.addEventListener('click', spanDeleteClickHandler);
 
 			// create divDisplay
 			divDisplay = document.createElement('div');
 			divDisplay.className = 'view';
-			divDisplay.setAttribute( 'data-todo-id', todo.id );
-			divDisplay.appendChild( checkbox );
-			divDisplay.appendChild( label );
-			divDisplay.appendChild( deleteLink );
+			divDisplay.setAttribute('data-todo-id', todo.id);
+			divDisplay.appendChild(checkbox);
+			divDisplay.appendChild(label);
+			divDisplay.appendChild(deleteLink);
 
 			// create todo input
 			inputEditTodo = document.createElement('input');
 			inputEditTodo.id = 'input_' + todo.id;
 			inputEditTodo.className = 'edit';
 			inputEditTodo.value = todo.title;
-			inputEditTodo.addEventListener( 'keypress', inputEditTodoKeyPressHandler );
-			inputEditTodo.addEventListener( 'blur', inputEditTodoBlurHandler );
+			inputEditTodo.addEventListener('keypress', inputEditTodoKeyPressHandler);
+			inputEditTodo.addEventListener('blur', inputEditTodoBlurHandler);
 
 
 			// create li
 			li = document.createElement('li');
 			li.id = 'li_' + todo.id;
-			li.appendChild( divDisplay );
-			li.appendChild( inputEditTodo );
+			li.appendChild(divDisplay);
+			li.appendChild(inputEditTodo);
 
 
-			if ( todo.completed ) {
+			if (todo.completed) {
 				li.className += 'complete';
 				checkbox.checked = true;
 			}
 
-			ul.appendChild( li );
+			ul.appendChild(li);
 		}
 	}
 
@@ -255,14 +255,14 @@
 	}
 
 	function redrawStatsUI() {
-		removeChildren( document.getElementsByTagName('footer')[0] );
+		removeChildren(document.getElementsByTagName('footer')[0]);
 		document.getElementById('footer').style.display = todos.length ? 'block' : 'none';
 
-		if ( stat.todoCompleted ) {
+		if (stat.todoCompleted) {
 			drawTodoClear();
 		}
 
-		if ( stat.totalTodo ) {
+		if (stat.totalTodo) {
 			drawTodoCount();
 		}
 	}
@@ -270,29 +270,29 @@
 	function drawTodoCount() {
 		var number = document.createElement('strong'),
 			remaining = document.createElement('span'),
-			text = ' ' + ( stat.todoLeft === 1 ? 'item' : 'items' ) + ' left';
+			text = ' ' + (stat.todoLeft === 1 ? 'item' : 'items') + ' left';
 
 		// create remaining count
 		number.innerHTML = stat.todoLeft;
 
 		remaining.id = 'todo-count';
-		remaining.appendChild( number );
-		remaining.appendChild( document.createTextNode( text ) );
+		remaining.appendChild(number);
+		remaining.appendChild(document.createTextNode(text));
 
-		document.getElementsByTagName('footer')[0].appendChild( remaining );
+		document.getElementsByTagName('footer')[0].appendChild(remaining);
 	}
 
 	function drawTodoClear() {
 		var buttonClear = document.createElement('button');
 
 		buttonClear.id = 'clear-completed';
-		buttonClear.addEventListener( 'click', hrefClearClickHandler );
+		buttonClear.addEventListener('click', hrefClearClickHandler);
 		buttonClear.innerHTML = 'Clear completed (' + stat.todoCompleted + ')';
 
-		document.getElementsByTagName('footer')[0].appendChild( buttonClear );
+		document.getElementsByTagName('footer')[0].appendChild(buttonClear);
 	}
 
-	function removeChildren( node ) {
+	function removeChildren(node) {
 		node.innerHTML = '';
 	}
 
@@ -300,12 +300,12 @@
 		var i, random,
 			uuid = '';
 
-		for ( i = 0; i < 32; i++ ) {
+		for (i = 0; i < 32; i++) {
 			random = Math.random() * 16 | 0;
-			if ( i === 8 || i === 12 || i === 16 || i === 20 ) {
+			if (i === 8 || i === 12 || i === 16 || i === 20) {
 				uuid += '-';
 			}
-			uuid += ( i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random) ).toString( 16 );
+			uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
 		}
 		return uuid;
 	}