우디의 개발 블로그

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 각각의 버튼에 이벤트 리스너 등록하기 이번 챕터에서는 투두리스트 하단의 All, Active, Completed, Completed Clear 버튼의 기능을 구현하겠습니다. 각각의 버튼 역할을 다음과 같습니다. All : 전체 투두리스트를 보여줌. Active : 완료되지 않은 할 일 리스트를 보여줌. Completed : 완료된 할 일 리스트를 보여줌. Completed Clear : 완료된 할 일 리스트를 전체 투두리스트에서 삭제함. 우선 todos.js 파일 상단에 All, Active, Completed, Completed..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 이번 챕터에서는 해야 할 일들을 전체 완료 처리 및 남은 할 일 개수를 표시하는 부분을 구현하도록 하겠습니다. 1. todos 전체 완료 처리 우선 todos.js 상단에 전체 완료 처리를 위해 만들어둔 버튼을 querySelector를 통해 checkAllBtnElem이라 선언하겠습니다. 그 다음, init() 함수 안에서 해당 버튼에 대한 클릭 이벤트 리스너를 등록하고, 콜백 함수로 onClickCompleteAll() 이라는 함수를 호출하겠습니다. const completeAllBtnElem = document.querySelec..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 할 일 목록에서 할 일 삭제 우리는 이전에 paintTodos() 함수를 통해 HTML을 그렸습니다. 이때, 각각의 할 일들은 'todo-item' 클래스 네임을 가지는 li 요소로 만들어지며, 그 안에 'delBtn' 클래스 네임을 가지는 button 요소가 존재합니다. 각각의 'todo-item'이 만들어질 때마다, 해당 'delBtn'에 'click'에 대한 이벤트 리스너를 등록하여 삭제 기능이 동작하도록 하였습니다. const paintTodos = () => { todoListElem.innerHTML = ''; //to..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 입력에 대한 이벤트 리스너 등록하기 일단 할 일을 추가하기 위해서는 요소로부터 이벤트 리스너를 등록하여, 이벤트를 캐치 후, 입력받은 데이터를 배열에 순차적으로 담아주어야 합니다. const todoInputElem = document.querySelector('.todo-input'); let todos = []; let id = 0; const init = () => { todoInputElem.addEventListener('keypress', (e) =>{ if( e.key === 'Enter' ){ appendTodos(..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 바닐라 자바스크립트를 이용해 todo-list를 만들어 보았습니다. 투두리스트의 동작 방식은 TodoMVC-VanilaJS 와 같이 작동하도록 개발하였으며, 다음과 같은 형태입니다. 1. 기능 정의하기 전체 선택 해당 버튼을 누르면 모든 할 일이 완료된 상태로 바뀜 이미 모두 완료된 상태일 때, 누르면 전체 할 일 리스트가 완료되지 않은 상태로 변함 전체 완료되지 않음 상태 일 때는 회색으로 표시 전체 완료된 상태는 초록색으로 표시 할 일 입력 사용자로부터 입력을 받음 Enter Key를 누르면 할 일이 추가됨 할 일이 추가된 이후, ..