우디의 개발 블로그

목차 기능정의 및 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(..

회원가입 시에 사용되는 비밀번호 유효성 검사 기능을 구현해보자. 구현할 비밀번호 유효성 검사 항목 영문 소문자를 사용 여부 영문 대문자를 사용 여부 숫자를 사용여부 특수문자 사용 여부 8자 이상 유효성 검사 항목에 대한 각각의 함수 만들기 const isValidLowercase = (password) => { return password.search(/[a-z]/g) >= 0; } const isValidUppercase = (password) => { return password.search(/[A-Z]/g) >= 0; } const isValidNumber = (password) => { return password.search(/[0-9]/g) >= 0; } const isValidSpecial ..