사용자가 할일을 추가, 삭제 및 완료할 수 있는 간단한 할일 목록 웹 애플리케이션을 만드세요. 사용자는 입력 필드를 통해 새로운 할일을 추가할 수 있으며, 각 할일 항목 옆에는 완료 표시 및 삭제 버튼이 있어야 합니다. 완료된 할일은 스타일이 변경되어 표시되며, 삭제 버튼을 통해 목록에서 제거할 수 있습니다. 이 애플리케이션은 JavaScript와 HTML, CSS를 사용하여 인터랙티브하게 구현해야 합니다.
예시:
예시 1: 사용자가 '청소하기' 입력 후 추가 버튼 클릭 -> 목록에 '청소하기' 추가됨.
예시 2: '청소하기' 항목의 완료 버튼 클릭 -> '청소하기' 항목에 취소선 표시.
예시 3: '청소하기' 항목의 삭제 버튼 클릭 -> 목록에서 '청소하기' 항목 제거됨.
제약조건:
1. 각 할일 항목은 고유해야 합니다.
2. 할일 목록은 HTML의 리스트 요소로 관리합니다.
3. JavaScript를 사용하여 DOM 조작을 통해 목록을 수정합니다.
4. CSS를 사용하여 완료된 항목에 스타일을 적용합니다.
HTML과 CSS를 사용하여 기본 UI를 만드세요.
JavaScript의 DOM 조작 메서드를 사용하여 할일을 추가하고 삭제하세요.
할일이 완료되었을 때, CSS 클래스를 추가하여 스타일을 변경하세요.
각 할일 항목에 대해 완료 및 삭제 버튼을 추가하세요.
입력된 할일이 비어 있는지 확인하고 유효성 검사를 추가하세요.