📝 연습 문제 1: 간단한 To-Do 리스트 구현

가장 기본적인 DOM 조작 연습입니다. document.querySelector(), addEventListener, element.classList.add() 등의 기본 API에 익숙해지는 것이 목표입니다.

요구사항

1. 목록 추가: 입력 필드에 텍스트를 입력하고 '추가' 버튼을 누르면 목록에 새로운 항목이 추가되어야 합니다.
2. 항목 완료: 목록 항목을 클릭하면 complete 상태로 토글되며, 텍스트에 취소선이 생겨야 합니다.
3. 항목 삭제: 각 항목 옆에 'X' 버튼을 추가하고, 클릭 시 해당 항목이 리스트에서 제거되어야 합니다.

📌 적용 가이드

• 스크립트: jQuery 대신 바닐라 자바스크립트(ES6) 문법만 사용하여 구현하세요.
• HTML/CSS:
  • BEM: todo-app, todo-app__input-group, todo-item, todo-item__text, todo-item--completed 등으로 구조를 명확히 분리해 보세요.
  • 부트스트랩/SCSS: 부트스트랩 클래스(예: form-control, btn, list-group)를 활용하여 마크업을 구성하셔도 좋습니다.
• 스타일 가이드:
  • 변수 선언 시 **const와 let**을 상황에 맞게 사용하세요.
  • 이벤트 리스너 등에서 **화살표 함수(Arrow Function)**를 적극적으로 사용해 보세요.

💡 다음 단계를 위한 힌트

• 새로운 HTML 요소를 생성할 때는 **document.createElement()**를 사용해야 합니다.
• 삭제 기능을 구현할 때, 이벤트 위임(Event Delegation)을 사용하면 효율적입니다. (선택 사항이지만, 도전해 보세요!)+