Dev.Project/Todolist_project (20) 썸네일형 리스트형 [Todolist_Basic] Final Step. 스타일링 Final Step. 스타일링 최종 코드가 담인 github 주소이다.>>To do List Project with only JavaScript by Jbee >>처음에 목표로 했던 기능들을 모두 추가하였다.이제 디자인적 요소를 추가할 차례다. 일단 최종적인 코드를 먼저 보여주겠다. index.html code> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 To Do List a{ color:#000; } a:hover{ color:#000; text-decoration: none; } To do List Write and Press Enter! Done Colored by Color .. [Todolist_Basic] Step 10. 삭제 버튼 구현하기 Step 10. 삭제 버튼 구현하기 그러고보니 더블 클릭을 이동으로 변경하고 삭제하기를 할 수 있는 버튼을 만들지 않았다. 한 번 복습한다고 해보자. className을 통해 font-awesome을 이용하고, id 값을 설정해주고, appendChild를 통해 출력해준다. main.js code> 123456var minusIcon = document.createElement('i');minusIcon.className = 'fa fa-minus';minusIcon.id = 'minusIcon_' + id;minusIcon.onclick = deleteItem; listItem.appendChild(minusIcon);cs 수정 아이콘(연필 아이콘)처럼 마우스가 over 되었을 때만 나타나게 하기 위해.. [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> 12345678910111213var do.. [Todolist_Basic] Step 8. 수정 버튼 사라지고 나타나게 하기 Step 8. 수정 버튼 사라지고 나타나게 하기 아 그런데 이대로 두기가 좀 그렇다. 왜냐면 수정은 어쩌다 한 번 하게 되는데 아이콘이 계속 보이고 있으니 거슬린다. 그래서 마우스를 올리면 아이콘이 나타나게 해야겠다. 일단 CSS로 가서 default visible 값을 조정하자. 일단 안보여야 하니까,hidden 으로 조정해준다. 12345.fa-pencil{ float:right; padding: 5px; visibility : hidden;}cs 마우스를 올리면… 이라는 이벤트는 mouseover 이다.listem 아이템에는 이미 ondblclick 이라는 이벤트가 바인딩되어 있다. 그렇기 때문에 addEventListener( ) 를 사용하여 이벤트를 추가해줘야 한다. 1listItem.addEv.. [Todolist_Basic] Step 7. 수정 버튼 생성하기 Step 7. 수정 버튼 생성하기 글씨 부분을 클릭해야 수정을 할 수 있는 기능은 정말 야박한 기능이다.전혀 직관적이지 않기 때문이다.그렇기 때문에 우리는 아이콘을 추가하여그 아이콘을 클릭해서 수정할 수 있도록 하자. font-awesome 이용하기>> font-awesome 에 대한 포스팅 보러가기 >> 수정하기 위한 아이콘은 왠지 연필 모양의 아이콘이 좋을 것 같아서,font-awesome 홈페이지에서 연필 모양 아이콘을 찾아왔다.아이콘을 생성하기 위해서는 i 태그를 생성해야한다. 그리고 font-awesome을 적용하기 위해서는 icon 태그에 클래스 명을 지정해야한다. .className 속성을 활용하여 해결하자. 원래는 글씨를 클릭했어야 수정이 가능했던 이벤트를 아이콘을 클릭하면 가능하도록 바꿔.. [Todolist_Basic] Step 6. Donelist 생성하기 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 .. [Todolist_Basic] Step 5. listItem 수정하고 삭제하기 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 으로 인식하게하여 더 큰 수를 만.. [Todolist_Basic] Step 4. 완료된 항목을 표시하기 Step 4. 완료된 항목을 표시하기 Step 들어가기전에,, 자바스크립트에서 CSS 속성을 제어하는 방법은 .style 메소드와 함께,CSS에서 text-decoration 이라고 되어있는 속성은, textDecoration 으로 - 뒤에 있는 알파벳을 대문자로 바꿔줘서 제어한다. itemText.style.textDecoration = ‘ ‘; 이런 방식으로 말이다. 이것을 응용해보면 input 태그의 type 속성도 제어할 수 있다. input 태그를 잡아서 var에 저장한 다음에, .type = “”을 통해서 설정할 수 있는 것이다. 우리는 check box를 통해서 완료된 항목을 표시할 것이다. 그런 다음 checked된 item들에 대해서 decoration을 줘서 좀 더 보기 쉽게 할 것이다.. 이전 1 2 3 다음
