To-do/js/script.js

console.clear();

var $formAddTask = $('#form-add-task'),
	$modalAddTask = $('#modal-window'),
	$taskList = $('#task-list');
	$removeAll = $('#remove-all');

function count() {   // счетчики 
	$('#should-be-done').text( $('#to-do ul.list-group').find( $('li') ).length );
	$('#will-be-come-soon').text( $('#go-go ul.list-group').find( $('li') ).length );
	$('#already-done').text( $('#completed ul.list-group').find( $('li') ).length );
}

function addTask(task, id) {
	var $listGroup = $taskList.find('[data-status="' + task.status + '"]').find('.list-group');

	var $btnDelete = $('<button>').addClass('btn btn-danger btn-xs pull-right delete-task').append('<span class="glyphicon glyphicon-remove">');

	$('<li>').addClass('list-group-item').text(task.title).attr('data-id', id).append($btnDelete).appendTo($listGroup);
	
	count();
}


$formAddTask.on('submit', function(event) {
	event.preventDefault();

	var task = {
		title: $(this).find('[name=title]').val(),
		description: $(this).find('[name=description]').val(),
		status: '2'               // 1- todo, 2 - in progress, 3 - completed
	};

	var id = new Date().getTime();
	localStorage.setItem(id, JSON.stringify(task));   // записать это туда
	addTask(task, id);
	$modalAddTask.modal('hide');

	this.reset();  // возвращает форму к виду к котором она определена в хтмл (очистка формы)
})

$removeAll.on('click', function(){           //кнопка удаления 
	localStorage.clear();					//очистка локальной памяти
	$('.list-group-item').remove();			//удаление всех строк
	count();			
});

$taskList.on('click', '.delete-task', function() {  // вешаем обработчик клик на кнопку delete-task
	var $parent = $(this).parent();   // вызываем родителя
	var taskId =  $parent.data('id');       
	localStorage.removeItem(taskId);        //удаление из локальной памяти элементов найденных по id
	$parent.remove(); 						// удаление родительского элемента в нашем случае это li по которому кликнули(this)
	count();
});


;(function() {    // самовызывающаяся функция которая перебирает и рисует li на странице динамически
	for (var key in localStorage) {
		var task = JSON.parse(localStorage[key]);  
		addTask(task, key);
	}	
})();