To-Do 프로그램 코드

var todo = (function(){
    var tasks = [];
    var STATE_P = '진행';
    var STATE_C = '완료';

    var addTask = (function(){
        var id = 0;

        return function(title){
            var result = id;
            tasks.push({id:id++, title:title, state:STATE_P});
            render();
            return result;
        }
    })();

    var removeTask = function(id){
        var isRemoved = false;
        for(var i =0; i< tasks.length; i++){
            if(tasks[i].id === id){
                tasks.splice(i,1);
                isRemoved = true;
                break;
            }
        }

        if(!isRemoved) {
            warning('삭제된거 없음(removeTask : invalid id)');
        }
        render();
    };

    var changeState = function(id, state){

        var ID = false, STATE;
        for(var i = 0; i < tasks.length; i++){
            if(tasks[i].id === id){
                ID = id;
                break;
            }
        }
        if(ID === false) {
            warning('changeState : invalid id - ' + id);
            return;
        }
        STATE = state;

        for(var i =0; i< tasks.length; i++){
            if(tasks[i].id === ID){
                tasks[i].state = STATE;
                break;
            }
        }
        render();
    };

    var warning = console.log;

    var target;

    var render = function(){
        target.render(Object.assign(tasks));
    };

    return{
        setRenderer: function(renderer){
            if(typeof renderer.init !== 'function' || typeof renderer.render !== 'function') return;// 약 타입 체크
            target = renderer;
            target.init(todo);
        },
        add:addTask,
        remove:removeTask,
        toggle:function(id){
            for(var i = 0; i<tasks.length;i++){
                if(tasks[i].id === id){
                    if(tasks[i].state === STATE_P) changeState(id, STATE_C);
                    else changeState(id, STATE_P);

                    break;
                }
            }
        }
    }
})();

var con = (function(){
    var host;
    return {
        init: function(todo){
            host = todo;
            console.clear();
        },
        render: function(tasks, STATE_P, STATE_C){
            var task;
            console.log('진행');
            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE_P){
                    console.log(task.id+'.', task.title+'('+task.state+')');
                }
            }

            console.log('완료');
            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE_C){
                    console.log(task.id+'.', task.title+'('+task.state+')');
                }
            }
        }
    }
});

var html = (function(){
    var completeLi, progressLi;
    var host;

    return {
        init: function(todo){
            host = todo;

            progressLi = document.querySelector('#todo .progress li');
            completeLi = document.querySelector('#todo .complete li');

            progressLi.parentNode.removeChild(progressLi);
            completeLi.parentNode.removeChild(completeLi);
        },
        render: function(tasks, STATE_P, STATE_C){
            if(typeof completeLi === 'undefined' || typeof progressLi === 'undefined') {
                return;
            }
            var progress = document.querySelector('#todo .progress');
            var complete = document.querySelector('#todo .complete');


            progress.innerHTML = '';
            complete.innerHTML = '';

            var task, child, inputs;
            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE_P){
                    child = progressLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
                    child.querySelector('p').innerHTML = task.title;
                    inputs = child.querySelectorAll('input');

                    inputs[0].setAttribute('data-task-id', task.id);
                    inputs[0].onclick = function(){
                        host.toggle(this.getAttribute('data-task-id'));
                    };
                    inputs[1].setAttribute('data-task-id', task.id);
                    inputs[1].onclick = function(){
                        host.remove(this.getAttribute('data-task-id'));
                    };
                    progress.appendChild(child);
                }else if(task.state === STATE_C){
                    child = progressLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
                    child.querySelector('p').innerHTML = task.title;
                    inputs = child.querySelectorAll('input');

                    inputs[0].setAttribute('data-task-id', task.id);
                    inputs[0].onclick = function(){
                        host.toggle(this.getAttribute('data-task-id'));
                    };
                    inputs[1].setAttribute('data-task-id', task.id);
                    inputs[1].onclick = function(){
                        host.remove(this.getAttribute('data-task-id'));
                    };
                    complete.appendChild(child);
                }
            }

            console.log('// 할일 입력창을 비운다.');
        }
    }
})();

todo.setRenderer(html);