ivy-love/todolist

정의

• 간단한 할 일 관리 앱. 할 일을 추가하고 관리할 수 있음.

기능정의

• 할 일 추가: 텍스트 입력 후 + 버튼 클릭하면 새로운 할 일이 리스트에 추가됨.
• 할 일 삭제: 휴지통 버튼 클릭시 해당 할 일이 리스트에서 삭제됨.
• 할 일 완료 표시: 할 일 완료시 체크박스를 클릭하거나 할 일을 클릭하면 취소선이 생김.
• 전체 할 일 삭제: Clear All 버튼 클릭하면 모든 할 일이 삭제됨.
• 입력 유효성 검사: 텍스트가 없는 경우 + 버튼 클릭 시 경고창이 출력됨.
• 전체 삭제 확인: Clear All 버튼 클릭 시 모든 할 일을 삭제하기 전에 확인을 위한 확인 메시지가 출력되어 선택할 수 있음.

할 일 추가 기능 (addTodo)

• 입력란이 비어있는지 확인하고, 비어있으면 경고 메시지를 표시하고 입력란에 포커스를 줌.
• 입력값이 비어있지 않으면 새로운 할 일 아이템을 생성하여 목록에 추가함.
• 사용자 경험을 위해 최근에 입력된 할 일이 맨 상단에 위치하도록 함.
• 생성한 할 일 아이템에는 체크박스, 텍스트 라벨, 삭제 버튼, 구분선이 포함됨.
• 할 일 아이템이 추가되면 입력란을 초기화하고 포커스를 줌.
• 체크박스의 상태 변경 시 텍스트 스타일을 조절하여 완료한 항목을 표시함.
• 삭제 버튼을 클릭하면 해당 할 일 아이템을 목록에서 제거함.

엔터 키로 할 일 추가 (enterList)

• 엔터 키를 누를 때 할 일 추가 함수인 addTodo를 호출하여 할 일을 추가함.

전체 삭제 기능 (clearAll)

• Clear All 버튼을 클릭하면 확인 창이 나타나고, 확인 시 모든 할 일 아이템을 삭제함.
• 취소를 선택하면 삭제를 취소함.

기본 설정 및 초기화

• 페이지가 로드되었을 때(DOMContentLoaded 이벤트) 실행되는 코드임.
• 커서를 입력란에 위치시켜 초기 커서 깜빡임을 보여줌.
• 엔터 키 입력 및 버튼 클릭 이벤트를 감지하여 해당 기능들을 실행함.