FE (3) 썸네일형 리스트형 [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 목록의 요소 삭제하기 [취소선 만들기]에서 썼던 addEventListener()를 사용해서 delItem이라는 함수로 목록의 요소를 삭제할 수 있도록 했다. 1. function.bind(thisArg, arg1, arg2, ···) bind 매서드를 사용하면, 함수의 컨텍스트를 변경하거나, 함수에 초기 인수를 설정하는 등의 작업을 할 수 있다. 여기에서 func.. [JavaScript] To-do List 만들기 - 2 (취소선 만들기) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 취소선 만들기 체크박스의 상태를 알 수만 있으면 checked 또는 unchecked의 상태에 따라 취소선을 긋거나 지우면 되기 때문에 크게 어려운 일은 아니었다. addEventListener() 을 사용해 체크박스의 체크여부에 따라 취소선을 그릴 수 있도록 만들었다. 1. addEventListener(eventType, callback) 웹 페이지에서 특정 이.. [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 아래 코드는 1~4번까지 완료된 코드이다 To-Do List 리스트의 marker를 체크박스로 바꾸는 과정에서 어려움을 겪었는데, 이 문제는 CSS default로 설정되어 있는 disc 형태의 marker를 삭제하고(list { list-style-type: none; }), JS checkbox 요소를 추가해주면 된다. (for문의 createElement) 이.. 이전 1 다음