Как заменить список задач функцией конструктора? - PullRequest
0 голосов
/ 12 мая 2019

Я смотрел видео на 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("리스트를 입력해 주세요")
    }

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...