Я смотрел видео на YouTube и заполнил список Todo, используя чистый JavaScript.Я хочу изменить этот код на функцию конструктора.но это не легко.
Ниже приведен код, который я написал.Я хочу улучшить этот код.но не ясно, как это исправить.
Я думаю, что код addItemTodo, это не плохо.но код removeItem и completeItem не годится.Интересно, это лучшее или есть другие улучшения?
function TodoList(todo) {
this.todo = todo;
}
function UI() {
this.addItemTodo = function(todo) {
var list = document.getElementById('todo');
var item = document.createElement('li');
item.innerText = todo.todo;
var buttons = document.createElement('div');
buttons.classList.add('buttons');
var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;
remove.addEventListener('click', this.removeItem);
var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;
complete.addEventListener('click', this.completeItem);
buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);
list.insertBefore(item, list.childNodes[0]); // 최신 순으로 목록 삽입
};
this.removeItem = function(e) {
console.log(e.target);
var item = this.parentNode.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
};
this.completeItem = function() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var target = (id === 'todo') ? document.getElementById('completed') : document.getElementById('todo');
parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
};
this.clearFields = function() {
document.getElementById('item').value = "";
}
}
var addBtn = document.getElementById('add');
addBtn.addEventListener('click', function() {
var value = document.getElementById('item').value;
var todoList = new TodoList(value);
var ui = new UI();
if(value) {
ui.addItemTodo(todoList);
ui.clearFields();
} else {
console.log("리스트를 입력해 주세요")
}
});