/Con.js

## Con.js
//Con Class
var Con = (function(){
    var Con = function(){}, fn = Con.prototype = new Renderer();
    fn._init = function(){ console.clear(); };
    fn._render = function() {
        var task;
        var n = 1;

        console.log('진행');
        for (var i = 0; i < this._tasks.length; i++){
            task = this._tasks[i];
            if (!task.isComplete()) {
                console.log(n++, '. ', task);
            }
        }

        n = 1;
        console.log('완료');
        for (i = 0; i < this._tasks.length; i++){
            task = this._tasks[i];
            if (task.isComplete()) {
                console.log(n++, '. ', task);
            }
        }
    };

    return Con;
})();

## index.html
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>TO-DO</title>
</head>
<body>
    <section id="todo">
        <form class="add">
            <input type="text" class="title"/>
            <input type="submit" value="할일 추가"/>
        </form>
        <section>
            <h1>진행</h1>
            <ul class="progress">
                <li>
                    <p>할일</p>
                    <input type="button" value="완료" />
                    <input type="button" value="삭제" />
                </li>
            </ul>
        </section>
        <section>
            <h1>완료</h1>
            <ul class="complete">
                <li>
                    <p>할일</p>
                    <input type="button" value="진행" />
                    <input type="button" value="삭제" />
                </li>
            </ul>
        </section>
    </section>
    <script src="Renderer.js"></script>
    <script src="Con.js"></script>
    <script src="ListManager.js"></script>
    <script src="List.js"></script>
    <script src="Item.js"></script>
    <script src="TaskManager.js"></script>
    <script type="text/javascript">
        var todo = new TaskManager();
        todo.setRenderer(new ListManager(
            //add 함수 정의
            function(taskManager){
                // 할 일의 내용을 입력받는 input 창을 찾는다.
                var title = document.querySelector('#todo .title');
                // 할 일을 추가하는 버튼을 클릭 시 실행될 함수를 정의한다.
                document.querySelector('#todo .add').onsubmit = function(){
                    // 입력창의 내용을 꺼내 공백을 없앤다.
                    var v = title.value.trim();

                    // 입력값이 있다면, todo의 add 메서드를 실행한다.
                    if(v) taskManager.add(v);

                    // 입력창의 값을 초기화한다.
                    title.value = '';
                    // onsubmit 함수 실행 후 페이지 재쟁신을 하지 않도록 false를 리턴한다.
                    return false;
                };
            },
            //pList 생성
            new List('#todo .progress', new Item('#todo .progress li')),
            //cList 생성
            new List('#todo .complete', new Item('#todo .complete li'))
        ));
    </script>
</body>
</html>

## Item.js
//Item class
var Item = (function(){
    var items = {};
    var Item = function(selector){
        //입력받은 selector가 문자열인지 검사
        if(typeof selector !== 'string') throw 'Type of selector must be string';
        //같은 selector로 Item이 만들어지는 것을 막음
        if(items[selector]) throw 'Already defined Item';
        this._el = items[selector] = selector;

        this._isInitialized = false;
    }, fn = Item.prototype;
    fn.init = function(taskManager){
        if(this._isInitialized) return;
        this._isInitialized = true;

        var el;
        this._el = el = document.querySelector(this._el);
        if(el.parentNode) el.parentNode.removeChild(el);
        this._taskManager = taskManager;
    };
    fn.add = function(task){
        var el = this._el.cloneNode(true);
        el.querySelector('p').innerHTML = task;

        var taskManager = this._taskManager;
        var btns = el.querySelectorAll('input');
        btns[0].onclick = function(){
            taskManager.toggle(task);
        };
        btns[1].onclick = function(){
            taskManager.remove(task);
        };

        return el;
    };
    return Item;
})();

## List.js
//List class
var List = (function(){
    var containers = {};
    var List = function(selector, item){
        //입력받은 item의 형 검사
        if(!(item instanceof Item)) throw 'item object must be created with new';
        //입력받은 selector가 문자열인지 검사
        if(typeof selector !== 'string') throw 'Type of selector must be string';
        //같은 selector로 List가 만들어지는 것을 막음
        if(containers[selector]) throw 'Already defined List';

        this._el = containers[selector] = selector;
        this._item = item;
    }, fn = List.prototype;
    fn.init = function(taskManager){
        if(this._isInitialized) return;
        this._isInitialized = true;

        this._el = document.querySelector(this._el);
        this._item.init(taskManager);
    };

    fn.clear = function(){ this._el.innerHTML = ''; };

    fn.add = function(task){ this._el.appendChild(this._item.add(task)); };

    return List;
})();

## ListManager.js
//ListManager class
var ListManager = (function(){
    var ListManager = function(add, pList, cList){
        if(typeof add !== 'function') throw 'add is not a function';
        if(!(pList instanceof List) || !(cList instanceof List)) throw 'list object must be created with new';

        this._add = add;
        this._pList = pList;
        this._cList = cList;

        this._isInitialized = false;
    }, fn = ListManager.prototype = new Renderer();

    fn._init = function(){
        if(this._isInitialized) return;
        this._isInitialized = true;

        this._add(this._taskManager);
        this._pList.init(this._taskManager);
        this._cList.init(this._taskManager);
    };

    fn._render = function(){
        var task;
        this._pList.clear();
        this._cList.clear();
        for(var i = 0; i < this._tasks.length; i++){
            task = this._tasks[i];
            if(task.isComplete()) this._cList.add(task);
            else this._pList.add(task);
        }
    };
    return ListManager;
})();

## Renderer.js
var Renderer = function(){};

Renderer.prototype.init = function(taskManager){
    this._taskManager = taskManager;
    this._init();
};
Renderer.prototype.render = function(tasks){
    this._tasks = tasks;
    this._render();
};

Renderer.prototype._init = function(){
    throw '_init must be override';
};
Renderer.prototype._render = function(){
    throw '_render must be override';
};

## TaskManager.js
var Task = (function(){
    var c = {}, p = {};

    var Task = function(title){
        this._title = title;
        this._state = p;
    }, fn = Task.prototype;

    fn.isComplete = function(){ return this._state === c; };

    fn.toggle = function(){
        if(this._state === c) this._state = p;
        else this._state = c;
    };

    fn.toString = function(){ return this._title; };

    return Task;
})();

var TaskManager = (function(){
    var TaskManager = function(){
        this._tasks = [];
        this._renderer = null;
    }, fn = TaskManager.prototype;

    fn._render = function(){this._renderer.render(this._tasks.slice(0));};

    fn._checkTask = function(task){return (task instanceof Task) && (this._tasks.indexOf(task) > -1);};

    fn.setRenderer = function(renderer){
        if (!(renderer instanceof Renderer)) return ;
        this._renderer = renderer;
        renderer.init(this);
    };

    fn.add = function(title){
        this._tasks.push(new Task(title));
        this._render();
    };

    fn.remove = function(task){
        var tasks = this._tasks;
        if(this._checkTask(task)) tasks.splice(tasks.indexOf(task),1);
        this._render();
    };

    fn.toggle = function(task){
        if(this._checkTask(task)) task.toggle();
        this._render();
    };

    return TaskManager;
})();
	//Con Class
	var Con = (function(){
	var Con = function(){}, fn = Con.prototype = new Renderer();
	fn._init = function(){ console.clear(); };
	fn._render = function() {
	var task;
	var n = 1;

	console.log('진행');
	for (var i = 0; i < this._tasks.length; i++){
	task = this._tasks[i];
	if (!task.isComplete()) {
	console.log(n++, '. ', task);
	}
	}

	n = 1;
	console.log('완료');
	for (i = 0; i < this._tasks.length; i++){
	task = this._tasks[i];
	if (task.isComplete()) {
	console.log(n++, '. ', task);
	}
	}
	};

	return Con;
	})();
	<!DOCTYPE html>
	<html lang="kr">
	<head>
	<meta charset="UTF-8">
	<title>TO-DO</title>
	</head>
	<body>
	<section id="todo">
	<form class="add">
	<input type="text" class="title"/>
	<input type="submit" value="할일 추가"/>
	</form>
	<section>
	<h1>진행</h1>
	<ul class="progress">
	<li>
	<p>할일</p>
	<input type="button" value="완료" />
	<input type="button" value="삭제" />
	</li>
	</ul>
	</section>
	<section>
	<h1>완료</h1>
	<ul class="complete">
	<li>
	<p>할일</p>
	<input type="button" value="진행" />
	<input type="button" value="삭제" />
	</li>
	</ul>
	</section>
	</section>
	<script src="Renderer.js"></script>
	<script src="Con.js"></script>
	<script src="ListManager.js"></script>
	<script src="List.js"></script>
	<script src="Item.js"></script>
	<script src="TaskManager.js"></script>
	<script type="text/javascript">
	var todo = new TaskManager();
	todo.setRenderer(new ListManager(
	//add 함수 정의
	function(taskManager){
	// 할 일의 내용을 입력받는 input 창을 찾는다.
	var title = document.querySelector('#todo .title');
	// 할 일을 추가하는 버튼을 클릭 시 실행될 함수를 정의한다.
	document.querySelector('#todo .add').onsubmit = function(){
	// 입력창의 내용을 꺼내 공백을 없앤다.
	var v = title.value.trim();

	// 입력값이 있다면, todo의 add 메서드를 실행한다.
	if(v) taskManager.add(v);

	// 입력창의 값을 초기화한다.
	title.value = '';
	// onsubmit 함수 실행 후 페이지 재쟁신을 하지 않도록 false를 리턴한다.
	return false;
	};
	},
	//pList 생성
	new List('#todo .progress', new Item('#todo .progress li')),
	//cList 생성
	new List('#todo .complete', new Item('#todo .complete li'))
	));
	</script>
	</body>
	</html>
	//Item class
	var Item = (function(){
	var items = {};
	var Item = function(selector){
	//입력받은 selector가 문자열인지 검사
	if(typeof selector !== 'string') throw 'Type of selector must be string';
	//같은 selector로 Item이 만들어지는 것을 막음
	if(items[selector]) throw 'Already defined Item';
	this._el = items[selector] = selector;

	this._isInitialized = false;
	}, fn = Item.prototype;
	fn.init = function(taskManager){
	if(this._isInitialized) return;
	this._isInitialized = true;

	var el;
	this._el = el = document.querySelector(this._el);
	if(el.parentNode) el.parentNode.removeChild(el);
	this._taskManager = taskManager;
	};
	fn.add = function(task){
	var el = this._el.cloneNode(true);
	el.querySelector('p').innerHTML = task;

	var taskManager = this._taskManager;
	var btns = el.querySelectorAll('input');
	btns[0].onclick = function(){
	taskManager.toggle(task);
	};
	btns[1].onclick = function(){
	taskManager.remove(task);
	};

	return el;
	};
	return Item;
	})();
	//List class
	var List = (function(){
	var containers = {};
	var List = function(selector, item){
	//입력받은 item의 형 검사
	if(!(item instanceof Item)) throw 'item object must be created with new';
	//입력받은 selector가 문자열인지 검사
	if(typeof selector !== 'string') throw 'Type of selector must be string';
	//같은 selector로 List가 만들어지는 것을 막음
	if(containers[selector]) throw 'Already defined List';

	this._el = containers[selector] = selector;
	this._item = item;
	}, fn = List.prototype;
	fn.init = function(taskManager){
	if(this._isInitialized) return;
	this._isInitialized = true;

	this._el = document.querySelector(this._el);
	this._item.init(taskManager);
	};

	fn.clear = function(){ this._el.innerHTML = ''; };

	fn.add = function(task){ this._el.appendChild(this._item.add(task)); };

	return List;
	})();
	//ListManager class
	var ListManager = (function(){
	var ListManager = function(add, pList, cList){
	if(typeof add !== 'function') throw 'add is not a function';
	if(!(pList instanceof List) \|\| !(cList instanceof List)) throw 'list object must be created with new';

	this._add = add;
	this._pList = pList;
	this._cList = cList;

	this._isInitialized = false;
	}, fn = ListManager.prototype = new Renderer();

	fn._init = function(){
	if(this._isInitialized) return;
	this._isInitialized = true;

	this._add(this._taskManager);
	this._pList.init(this._taskManager);
	this._cList.init(this._taskManager);
	};

	fn._render = function(){
	var task;
	this._pList.clear();
	this._cList.clear();
	for(var i = 0; i < this._tasks.length; i++){
	task = this._tasks[i];
	if(task.isComplete()) this._cList.add(task);
	else this._pList.add(task);
	}
	};
	return ListManager;
	})();
	var Renderer = function(){};

	Renderer.prototype.init = function(taskManager){
	this._taskManager = taskManager;
	this._init();
	};
	Renderer.prototype.render = function(tasks){
	this._tasks = tasks;
	this._render();
	};

	Renderer.prototype._init = function(){
	throw '_init must be override';
	};
	Renderer.prototype._render = function(){
	throw '_render must be override';
	};
	var Task = (function(){
	var c = {}, p = {};

	var Task = function(title){
	this._title = title;
	this._state = p;
	}, fn = Task.prototype;

	fn.isComplete = function(){ return this._state === c; };

	fn.toggle = function(){
	if(this._state === c) this._state = p;
	else this._state = c;
	};

	fn.toString = function(){ return this._title; };

	return Task;
	})();

	var TaskManager = (function(){
	var TaskManager = function(){
	this._tasks = [];
	this._renderer = null;
	}, fn = TaskManager.prototype;

	fn._render = function(){this._renderer.render(this._tasks.slice(0));};

	fn._checkTask = function(task){return (task instanceof Task) && (this._tasks.indexOf(task) > -1);};

	fn.setRenderer = function(renderer){
	if (!(renderer instanceof Renderer)) return ;
	this._renderer = renderer;
	renderer.init(this);
	};

	fn.add = function(title){
	this._tasks.push(new Task(title));
	this._render();
	};

	fn.remove = function(task){
	var tasks = this._tasks;
	if(this._checkTask(task)) tasks.splice(tasks.indexOf(task),1);
	this._render();
	};

	fn.toggle = function(task){
	if(this._checkTask(task)) task.toggle();
	this._render();
	};

	return TaskManager;
	})();