::Devlog::

Step 9. Donelist에서 다시 Todolist로 보내기 이번 Step 에서도 사용자 경험에 집중해서 좀 더 발전시켜보겠다. 만약에 사용자가 실수로 Donelist 로 item 을 보냈다면? 다시 취소해야할 수 있는게 아닌가? Donelist에 있는 list를 더블클릭하면 다시 Todolist로 올 수 있게 하자. 자바스크립트만 조금 손보면 될 듯하다. 우리가 더블클릭할 li 태그의 parentId 값을 읽어오자. 그렇다면 자신이 현재 속해있는 list가 어떤 list인지 알 수 있게 된다. if 문으로 분기해서 todolist에 속해있다면, donelist로 보내고 donelist에 속해있다면, todolist로 보내는 것이다. main.js code> 12345678910111213var do..

Step 8. 수정 버튼 사라지고 나타나게 하기 아 그런데 이대로 두기가 좀 그렇다. 왜냐면 수정은 어쩌다 한 번 하게 되는데 아이콘이 계속 보이고 있으니 거슬린다. 그래서 마우스를 올리면 아이콘이 나타나게 해야겠다. 일단 CSS로 가서 default visible 값을 조정하자. 일단 안보여야 하니까,hidden 으로 조정해준다. 12345.fa-pencil{ float:right; padding: 5px; visibility : hidden;}cs 마우스를 올리면… 이라는 이벤트는 mouseover 이다.listem 아이템에는 이미 ondblclick 이라는 이벤트가 바인딩되어 있다. 그렇기 때문에 addEventListener( ) 를 사용하여 이벤트를 추가해줘야 한다. 1listItem.addEv..

Step 7. 수정 버튼 생성하기 글씨 부분을 클릭해야 수정을 할 수 있는 기능은 정말 야박한 기능이다.전혀 직관적이지 않기 때문이다.그렇기 때문에 우리는 아이콘을 추가하여그 아이콘을 클릭해서 수정할 수 있도록 하자. font-awesome 이용하기>> font-awesome 에 대한 포스팅 보러가기 >> 수정하기 위한 아이콘은 왠지 연필 모양의 아이콘이 좋을 것 같아서,font-awesome 홈페이지에서 연필 모양 아이콘을 찾아왔다.아이콘을 생성하기 위해서는 i 태그를 생성해야한다. 그리고 font-awesome을 적용하기 위해서는 icon 태그에 클래스 명을 지정해야한다. .className 속성을 활용하여 해결하자. 원래는 글씨를 클릭했어야 수정이 가능했던 이벤트를 아이콘을 클릭하면 가능하도록 바꿔..

Step 6. Donelist 생성하기 삭제하는 것은 잘못 만들었을 때 삭제하는 것으로 기능을 바꾸고, 더블클릭을 하면 Done으로 되서 Donelist로 옮기는 기능으로 수정하는게 좀 더 직관적일 것 같다. 체크박스도 디자인상 보기가 안좋다. 그래서 체크박스를 생성하지 말고, 했다는 것을 Donelist로 옮겨서 style을 적용하자.삭제 기능은 나중에 다른 아이콘을 통해 구현하자. column을 쉽게 나누기 위해 부트스트랩 그리드를 적용했다. >> 부트스트랩 그리드 관련 포스팅 >> index.html code>123456789101112131415161718192021222324 To do List Write what to do and Press Enter! Done Colored by Color ..

Step 5. listItem 수정하고 삭제하기 Step 들어가기 전에, totalItems 변수를 수정하자. 총 개수를 나타내기는 하지만 하나의 li 태그를 가리키는데 사용되었다. 한 문서에서 unique 한 번호를 부여할 때 사용하는 것을 id 라고 한다. 그리고 흔히들 id를 시간을 기반으로 한 난수 생성을 통해서 한다. 그래서 이번 기회에 난수 생성을 통해 id를 부여해보겠다. 12var date = new Date( );var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();cs이렇게 id 값을 부여한다. 앞에 “” 로 공백을 준 이유는 String 으로 인식하게하여 더 큰 수를 만..