[Todolist_Basic] Step 9. Donelist에서 다시 Todolist로 보내기

Step 9. Donelist에서 다시 Todolist로 보내기

이번 Step 에서도 사용자 경험에 집중해서 좀 더 발전시켜보겠다.

만약에 사용자가 실수로 Donelist 로 item 을 보냈다면?

다시 취소해야할 수 있는게 아닌가?

Donelist에 있는 list를 더블클릭하면

다시 Todolist로 올 수 있게 하자.

자바스크립트만 조금 손보면 될 듯하다.

우리가 더블클릭할 li 태그의 parentId 값을 읽어오자.

그렇다면 자신이 현재 속해있는 list가 어떤 list인지 알 수 있게 된다.

if 문으로 분기해서

todolist에 속해있다면, donelist로 보내고

donelist에 속해있다면, todolist로 보내는 것이다. 

main.js code>

var donelist = document.getElementById('donelist');
function moveItem(){
  //this === span
  var listItemId = this.id.replace('li_', '');
  var listItem = document.getElementById('li_' + listItemId);
  var listItemParentId = listItem.parentElement;
  console.log(listItemParentId);
  if(listItemParentId == donelist){
    todolist.appendChild(listItem);
  } else {
    donelist.appendChild(listItem);
  }
} 

- Step 9. The end -

 

Step 10. 삭제 버튼 구현하기. [이동]