To Do List(HTML, CSS, JavaScript) 만들기

1. 소개

우선 To do List는 해야 할 목록을 의미하는데 간단히 소개하자면 해야 할 일들을 목록으로 만들어서 이행했는지 안 했는지 확인하는 목적의 목록이다.

2. 구현 기능 종류

• 목록 추가
• 목록 변경
• 목록 삭제
• 목록 완료

크게 보면 이렇게 4개의 기능들이 존재한다. 물론 기능을 구현하면서 추가적으로 부수적인 기능들로 구현을 할 것이지만 크게 중요한 기능들은 위와 같다.

3. 구현 방식

- 목록 추가

목록을 추가하기 위해서는 그것을 입력할 목록의 입력이 필요하다. 그래서 input 태그를 이용하여 목록의 내용을 입력하고 appendChild()를 이용하여 원하는 지점에 글을 추가하였다. 그런데 글뿐만 아니라 목록에 있는 글의 완료와 삭제까지 하기 위해서 마찬가지로 appendChild()를 이용하여 버튼을 생성하였다. 이러한 기능을 추가 버튼에 onclick 이벤트를 이용하거나 Enter를 치면 발생하도록 구현했다.

- 목록 변경

목록의 변경은 추가한 글을 마우스 왼쪽 클릭을 하면 알림 창이 나와서 변경할 수 있게 해 놓았다. onclick 이벤트를 이용해서 prompt()를 호출하여 알림 창을 띄우고 알림 창에 원하는 내용을 입력하면 변하게 했다. 그런데 아무것도 입력하지 않거나 취소를 누르면 그대로 유지하게 하였다.

- 목록 삭제

삭제 버튼에 onclick 이벤트를 이용하여 구현했는데 해야 할 목록에 있는 글들은 해당하는 글의 id값 중 수로 되어있는 식별 값을 전달받아서 반복문을 이용하여 display = "none"으로 처리를 했다. 완료된 목록에서의 글의 경우는 삭제해야 할 글의 id값을 전달받아서 반복문을 이용하여 display = "none"으로 처리했다.

- 목록 완료

완료하는 것 또한 완료 버튼에서 onclick 이벤트를 이용하여 완료되게 하였는데 먼저 완료된 글을 변수에 저장한 이후에 완료 목록 위치에 글을 추가한다. 그리고 삭제 버튼과 개행을 시켜준다. 그다음에 완료된 글을 해야 할 목록에서 삭제시켜준다.

- 기타 기능

목록의 글이 지나치게 많을 경우에 숨길 필요성을 느껴서 글을 접고 펼칠 수 있는 detail이라는 태그를 이용하여 To Do list과 Done List를 클릭하면 글을 접고 펼칠 수 있게 하였고, 불투명도와 margin의 변화를 사용하여 애니메이션을 꾸몄다.

그리고 목록에서 글과 버튼의 위치를 원하는 곳에 고정시키고 싶었지만 아직 실력이 부족하여 해답을 찾지 못했다. 그래서 화면 크기에 따라 width값을 조절하여 비슷하게 흉내를 내었다.

4. 코드 및 구현

구현된 사이트: travelerfootprint.tistory.com/133

To Do List

5. 느낀 점

처음 HTML과 CSS 그리고 JavaScip를 공부한 후 간단한 웹사이트를 만들어보았다. 비록 실제로 만들어보니 만만치 않았지만 그래서 만드는 순간에는 재미있었고 다음에도 다른 웹사이트를 조금씩 만들어볼 것이다. 지금 만든 To Do List의 코드는 많이 미숙하지만 시간을 들여서 실력이 좋아지게 된다면 천천히 수정해나갈 것이다.

깃허브 주소: github.com/fdoom/toy/tree/main/To_do_list
참고한 사이트: www.w3schools.com/howto/howto_js_todolist.asp