우디의 개발 블로그

목차 기능정의 및 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를 누르면 할 일이 추가됨 할 일이 추가된 이후, ..

index.html progress initiate progress-bar.css .progress-bar { background-color: #09B864; border-radius: 4px; box-shadow: inset 0 0.5em 0.5em rgba(0,0,0,0.05); height: 5px; margin: 2rem 0 2rem 0; overflow: hidden; position: relative; transform: translateZ(0); width: 100%; } .progress-bar__bar { background-color: #ececec; box-shadow: inset 0 0.5em 0.5em rgba(94, 49, 49, 0.05); bottom: 0; left: 0; ..