Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment