Vanillajs app: Enforce code style

vanilla-examples/vanillajs/js/app.js

@@ -2,8 +2,7 @@ var todos = [],
 	stat = {},
 	ENTER_KEY = 13;
 
-window.addEventListener( "load", windowLoadHandler, false );
-
+window.addEventListener( 'load', windowLoadHandler, false );
 
 function Todo( title, completed ) {
 	this.id = getUuid();
@@ -17,7 +16,6 @@ function Stat() {
 	this.totalTodo = 0;
 }
 
-
 function windowLoadHandler() {
 	loadTodos();
 	refreshData();
@@ -25,54 +23,48 @@ function windowLoadHandler() {
 }
 
 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 ) {
-	var inputEditTodo,
-		trimmedText,
-		todoId;
-
-	inputEditTodo = event.target;
-	trimmedText = inputEditTodo.value.trim();
+	var inputEditTodo = event.target,
+		trimmedText = inputEditTodo.value.trim(),
 		todoId = event.target.id.slice( 6 );
 
 	if ( trimmedText ) {
 		if ( event.keyCode === ENTER_KEY ) {
 			editTodo( todoId, trimmedText );
 		}
-	}
-	else {
+	} else {
 		removeTodoById( todoId );
 		refreshData();
 	}
 }
 
 function inputEditTodoBlurHandler( event ) {
-	var inputEditTodo,
-		todoId;
-
-	inputEditTodo = event.target;
+	var inputEditTodo = event.target,
 		todoId = event.target.id.slice( 6 );
+
 	editTodo( todoId, inputEditTodo.value );
 }
 
 function newTodoKeyPressHandler( event ) {
 	if ( event.keyCode === ENTER_KEY ) {
-		addTodo( document.getElementById( 'new-todo' ).value );
+		addTodo( document.getElementById('new-todo').value );
 	}
 }
 
 function toggleAllChangeHandler( event ) {
 	for ( var i in todos ) {
-		todos[i].completed = event.target.checked;
+		todos[ i ].completed = event.target.checked;
 	}
+
 	refreshData();
 }
 
 function spanDeleteClickHandler( event ) {
-	removeTodoById( event.target.getAttribute( 'data-todo-id' ) );
+	removeTodoById( event.target.getAttribute('data-todo-id') );
 	refreshData();
 }
 
@@ -82,36 +74,28 @@ function hrefClearClickHandler() {
 }
 
 function todoContentHandler( event ) {
-	var todoId,
-		div,
-		inputEditTodo;
+	var todoId = event.target.getAttribute('data-todo-id'),
+		div = document.getElementById( 'li_' + todoId ),
+		inputEditTodo = document.getElementById( 'input_' + todoId );
 
-	todoId = event.target.getAttribute( 'data-todo-id' );
-	div = document.getElementById( 'li_'+todoId );
 	div.className = 'editing';
-
-	inputEditTodo = document.getElementById( 'input_' + todoId );
 	inputEditTodo.select();
 }
 
 function checkboxChangeHandler( event ) {
-	var checkbox,
-		todo;
+	var checkbox = event.target,
+		todo = getTodoById( checkbox.getAttribute('data-todo-id') );
 
-	checkbox = event.target;
-	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 ) {
@@ -125,42 +109,44 @@ function addTodo( text ) {
 }
 
 function editTodo( todoId, text ) {
-	var i;
+	var i, l;
 
-	for ( i=0; i < todos.length; 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 ) {
-	var i;
+	var i, l;
 
-	for ( i=0; i < todos.length; i++ ) {
-		if ( todos[i].id === id ) {
+	for ( i = 0, l = todos.length; i < l; i++ ) {
+		if ( todos[ i ].id === id ) {
 			todos.splice( i, 1 );
 		}
 	}
 }
 
 function removeTodosCompleted() {
-	var i = todos.length-1;
-	while ( i >= 0 ) {
-		if ( todos[i].completed ) {
+	var i = todos.length;
+
+	while ( i-- ) {
+		console.log(i);
+		if ( todos[ i ].completed ) {
 			todos.splice( i, 1 );
 		}
-		--i;
    }
 }
 
 function getTodoById( id ) {
-	var i;
+	var i, l;
 
-	for ( i=0; i < todos.length; 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 ];
 		}
 	}
 }
@@ -178,62 +164,55 @@ function saveTodos() {
 }
 
 function computeStats() {
-	var i;
+	var i, l;
 
 	stat = new Stat();
 	stat.totalTodo = todos.length;
-	for ( i=0; i < todos.length; i++ ) {
-		if ( todos[i].completed ) {
-			stat.todoCompleted += 1;
+
+	for ( i = 0, l = todos.length; i < l; i++ ) {
+		if ( todos[ i ].completed ) {
+			stat.todoCompleted++;
 		}
 	}
+
 	stat.todoLeft = stat.totalTodo - stat.todoCompleted;
 }
 
 
 function redrawTodosUI() {
 
-	var ul,
-		todo,
-		checkbox,
-		label,
-		deleteLink,
-		divDisplay,
-		inputEditTodo,
-		li,
-		i;
-
-	ul = document.getElementById( 'todo-list' );
+	var todo, checkbox, label, deleteLink, divDisplay, inputEditTodo, li, i, l,
+		ul = document.getElementById('todo-list');
 
-	document.getElementById( 'main' ).style.display = todos.length ? 'block' : 'none';
+	document.getElementById('main').style.display = todos.length ? 'block' : 'none';
 
-	ul.innerHTML = "";
-	document.getElementById( 'new-todo' ).value = '';
+	ul.innerHTML = '';
+	document.getElementById('new-todo').value = '';
 
-	for ( i= 0; i < todos.length; i++ ) {
-		todo = todos[i];
+	for ( i = 0, l = todos.length; i < l; i++ ) {
+		todo = todos[ i ];
 
 		// create checkbox
-		checkbox = document.createElement( 'input' );
+		checkbox = document.createElement('input');
 		checkbox.className = 'toggle';
 		checkbox.setAttribute( 'data-todo-id', todo.id );
 		checkbox.type = 'checkbox';
 		checkbox.addEventListener( 'change', checkboxChangeHandler );
 
 		// create div text
-		label = document.createElement( 'label' );
+		label = document.createElement('label');
 		label.setAttribute( 'data-todo-id', todo.id );
 		label.appendChild( document.createTextNode( todo.title ) );
 
 
 		// create delete button
-		deleteLink = document.createElement( 'button' );
+		deleteLink = document.createElement('button');
 		deleteLink.className = 'destroy';
 		deleteLink.setAttribute( 'data-todo-id', todo.id );
 		deleteLink.addEventListener( 'click', spanDeleteClickHandler );
 
 		// create divDisplay
-		divDisplay = document.createElement( 'div' );
+		divDisplay = document.createElement('div');
 		divDisplay.className = 'view';
 		divDisplay.setAttribute( 'data-todo-id', todo.id );
 		divDisplay.appendChild( checkbox );
@@ -243,7 +222,7 @@ function redrawTodosUI() {
 
 
 		// create todo input
-		inputEditTodo = document.createElement( 'input' );
+		inputEditTodo = document.createElement('input');
 		inputEditTodo.id = 'input_' + todo.id;
 		inputEditTodo.className = 'edit';
 		inputEditTodo.value = todo.title;
@@ -252,89 +231,72 @@ function redrawTodosUI() {
 
 
 		// create li
-		li = document.createElement( 'li' );
+		li = document.createElement('li');
 		li.id = 'li_' + todo.id;
 		li.appendChild( divDisplay );
 		li.appendChild( inputEditTodo );
 
 
-		if ( todo.completed )
-		{
+		if ( todo.completed ) {
 			li.className += 'complete';
 			checkbox.checked = true;
 		}
 
 		ul.appendChild( li );
 	}
-
-
 }
 
 function changeToggleAllCheckboxState() {
-	var toggleAll = document.getElementById( 'toggle-all' );
-	if ( stat.todoCompleted === todos.length ) {
-		toggleAll.checked = true;
-	} else {
-		toggleAll.checked = false;
-	}
+	var toggleAll = document.getElementById('toggle-all');
+
+	toggleAll.checked = stat.todoCompleted === todos.length;
 }
 
 function redrawStatsUI() {
-	removeChildren( document.getElementsByTagName( 'footer' )[ 0 ] );
-	document.getElementById( 'footer' ).style.display = todos.length ? 'block' : 'none';
+	removeChildren( document.getElementsByTagName('footer')[0] );
+	document.getElementById('footer').style.display = todos.length ? 'block' : 'none';
 
-	if ( stat.todoCompleted > 0 ) {
+	if ( stat.todoCompleted ) {
 		drawTodoClear();
 	}
 
-	if ( stat.totalTodo > 0 ) {
+	if ( stat.totalTodo ) {
 		drawTodoCount();
 	}
 }
 
 function drawTodoCount() {
+	var number = document.createElement('strong'),
+		remaining = document.createElement('span'),
+		text = ' ' + ( stat.todoLeft === 1 ? 'item' : 'items' ) + ' left';
 
-	var number,
-		theText,
-		remaining;
 	// create remaining count
-	number = document.createElement( 'strong' );
 	number.innerHTML = stat.todoLeft;
-	theText = ' item';
-	if ( stat.todoLeft !== 1 ) {
-		theText += 's';
-	}
-	theText += ' left';
 
-	remaining = document.createElement( 'span' );
 	remaining.id = 'todo-count';
 	remaining.appendChild( number );
-	remaining.appendChild( document.createTextNode( theText ) );
+	remaining.appendChild( document.createTextNode( text ) );
 
-	document.getElementsByTagName( 'footer' )[ 0 ].appendChild( remaining );
+	document.getElementsByTagName('footer')[0].appendChild( remaining );
 }
 
 function drawTodoClear() {
+	var buttonClear = document.createElement('button');
 
-	var buttonClear = document.createElement( 'button' );
 	buttonClear.id = 'clear-completed';
 	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 ) {
 	node.innerHTML = '';
 }
 
-
 function getUuid() {
-	var uuid = '',
-		i,
-		random;
+	var i, random,
+		uuid = '';
 
 	for ( i = 0; i < 32; i++ ) {
 		random = Math.random() * 16 | 0;