To-do list на jQuery с использованием LockalStorage

Итак начнем с основ практики использования jQuery библиотеки, а именно создания to-do list или просто всем известной "тудушки" :). Что такое to-do list? Это список определенных запланированных заданий, которые надо выполнить или просто список событий. Реализовывать задачу будем с помощью браузерного хранения LockalStorage, что бы данные не удалялись во время перезагрузки.

Выглядеть "тудушка" будет следующим образом (демо):

ToDoList

    Итак, для начала определим форму:

        <div id="todo">
            <h1>ToDoList</h1>
            <ul class="js_list"></ul>
            <input type="text" class="js_add_input">
            <button class="js_add_button">Add</button>
        </div>
    	
        <script type="text/template" id="todo_item_template">
            <button class="js_item_remove_btn" type="button">X</button>
            <button class="js_item_edit_btn btn_edit" type="button">Edit</button>
            <button class="js_item_apply_btn btn_apply" type="button" style="display: none;">Apply</button>
            <input class="js_item_input" type="text" value="{{val}}" style="display: none;">
            <span class="js_item_text">{{val}}</span>
        </script>
    

    Далее основные переменные:

    var dom = $('#todo'),
    	add_input = dom.find('.js_add_input'),
    	add_btn = dom.find('.js_add_button'),
    	list = dom.find('.js_list'), 
    	list_arr = $.parseJSON(localStorage.getItem('todo') || '[]');
    	item_template = $('#todo_item_template').text();
    

    и серию методов:

    function save() {
    	localStorage.setItem('todo', JSON.stringify(list_arr))
    }
    
    function buildList() {
    	list.html('');
    	$(list_arr).each(function(index, text){
    		var item = makeItem(text);
    		list.append(item);
    		setItemActions(item, index);
    	})
    };
    
    function makeItem(value) {
    	var li = $('<li>');
    	li.html(item_template.replace(/{{val}}/g, value));
    	return li;
    }
    
    function setItemActions(item, index) {
    	var remove_btn = item.find('.js_item_remove_btn'),
    		edit_btn = item.find('.js_item_edit_btn'),
    		edit_input = item.find('.js_item_input'),
    		item_text = item.find('.js_item_text');
    	var apply_btn = item.find('.js_item_apply_btn');
    	
    	remove_btn.on('click', function() {
    		list_arr.splice(index, 1);
    		changeAction();
    	});
    
    	edit_btn.on('click', function() {
    		edit_input.show();
    		apply_btn.show();
    		item_text.hide();
    		edit_btn.hide();
    	})
    	
    	apply_btn.on('click', function() {
    		list_arr[index] = edit_input.val();
    		changeAction();
    	})
    }
    
    function changeAction() {
    	buildList();
    	save();
    }
    
    add_btn.on('click', function() {
    	var text = add_input.val();
    	list_arr.push(text);
    	add_input.val('');
    	changeAction();
    });
    buildList();
    

    Данная реализация to-do list не самая простая, но до начала ее понимания следует прочитать книгу по основам jQuery.

    Скачать реализацию можно по ссылке.

    Добавить комментарий