Skip to content

Instantly share code, notes, and snippets.

Created Jul 1, 2017
Embed
What would you like to do?
S70 To-Do List 완성 코드
//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;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment