title: How do I replace todo list with a constructor function?
body: <p>I watched YouTube video and completed the Todo List using Pure JavaScript. I want to change this code to constructor function. but It's not easy.</p>
  
  <p>Below is the code I wrote. I want to improve this code. but it 's not clear how to fix it.</p>
  
  <p>I think addItemTodo code, it's not bad. but removeItem and completeItem code is not good. I wonder if this is the best or if there are other improvements.</p>
  
  <pre><code>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("리스트를 입력해 주세요")
      }
  
  });
  </code></pre>