이것저것 프로젝트한다::투두리스트편(1)

투두 리스트 테스트 코드를 짜오란다. 그래서 이것저것 준비해봤다. 다른 것은 생각하지 않고 ‘항목을 동적 생성' 할 수 있도록 하는 데에만 초점을 맞추어 다음과 같은 코드를 짰었다.

main.html

나는 이 코드가 불만이었는데, 이 코드는 항목을 추가하고 체크할 수 있지만 삭제할 수 없기 때문이었다.

이 코드를 실행하면 다음과 같은 결과가 나온다::

여기에 디자인을 바꾸어 꾸미는 식으로 적당히 완성할 수도 있지만, 이는 현재 사용되고 있는 다른 투두 리스트들과는 제법 다르게 작동하고 있었다. 내가 바라는 ‘투두 리스트의 추가와 삭제가 자유로운’ 투두 리스트와도 거리가 멀었다.

코드를 지운 후 다시 한 번 자료 조사를 진행했다.

마침 좋은 참고 자료를 발견했다. 이 사이트를 따라해보기로 했다::

이것은 사이트에서 제시하는 html 코드이다. <div> 태그 (*tag defines a division or a section in an HTML document, uses as a container for HTML elements)를 이용해 to-do 리스트의 헤더 부분을 분리하였다. to-do 항목의 텍스트를 입력하는 란은 <input type=“text” … > 를 이용해 구현했음을 확인할 수 있다. (나는 이 방식을 미처 생각하지 못했다.) 버튼 대신 <span> 태그(inline container, div가 블럭 수준의 요소라면 span은 인라인 수준의 요소이다.)를 사용해 만드는 버튼을 구현했다. span 태그를 클릭할 시 js에 기술한 함수 newElement()를 수행하도록 구현했음을 확인할 수 있다.

CSS 코드는 코드를 꾸미기 위함이다. 커스텀할 것이므로 생략한다.

다음으로 자바스크립트 코드이다. 각 아이템 리스트에 삭제 버튼을 추가하기 위해 js 코드를 만들었음을 볼 수 있다. 삭제 버튼을 누르면 아이템이 숨겨진다. 심볼 추가, 그리고 버튼 추가 연산 모두 이 곳에서 이루어진다. 버튼 추가 함수에 대해서는 function newElements(){} 쪽을 참고하면 된다.

이를 따라 쓰면서 appendChild is not a function error 오류를 겪었는데, 다행이도 link rel… 부분을 밑으로 옮기니 해결되었다. 오류가 난 부분은 js인데 왜 css 가 들어있는 태그를 내렸더니 오류가 사라진 것인지는 모르겠다.

적당히 색깔을 넣어 완성한다.

github에도 소스코드를 올려보았다.

[참고 자료]

-https://www.w3schools.com/tags/tag_div.ASP

-https://www.w3schools.com/howto/howto_js_todolist.asp

-https://um-sal.tistory.com/11 오류 관련(1)