시연 모드: 이 페이지는 비회원도 사용 가능한 데모 페이지입니다. 평가 결과는 저장되지 않습니다.
초급 JavaScript

기본 할일 목록 웹 앱 만들기 (완성판)

사용자가 할일을 추가, 삭제 및 완료할 수 있는 간단한 할일 목록 웹 애플리케이션을 만드세요. 사용자는 입력 필드를 통해 새로운 할일을 추가할 수 있으며, 각 할일 항목 옆에는 완료 표시 및 삭제 버튼이 있어야 합니다. 완료된 할일은 스타일이 변경되어 표시되며, 삭제 버튼을 통해 목록에서 제거할 수 있습니다. 이 애플리케이션은 JavaScript와 HTML, CSS를 사용하여 인터랙티브하게 구현해야 합니다.

예시:
예시 1: 사용자가 '청소하기' 입력 후 추가 버튼 클릭 -> 목록에 '청소하기' 추가됨.
예시 2: '청소하기' 항목의 완료 버튼 클릭 -> '청소하기' 항목에 취소선 표시.
예시 3: '청소하기' 항목의 삭제 버튼 클릭 -> 목록에서 '청소하기' 항목 제거됨.

제약조건:
1. 각 할일 항목은 고유해야 합니다.
2. 할일 목록은 HTML의 리스트 요소로 관리합니다.
3. JavaScript를 사용하여 DOM 조작을 통해 목록을 수정합니다.
4. CSS를 사용하여 완료된 항목에 스타일을 적용합니다.


코드 작성