[JS] TO DO LIST

TO DO LIST

 

[구현]

• 추가하기 버튼 클릭하면 목록 생성
• input 값이 빈값이면 코드 실행 X (조건문)
• 목록 추가 후 input.value 비우기
• 목록 추가 후 input 자동 포커스
• 체크박스 클릭시 줄긋기
• 목록 제거하기 클릭하면 삭제

 

 

1. JS에서 HTML Element 화면에 생성하기

 

• .creatElement - 요소 생성 
• .textContent - 요소 안에 text 넣기
• .appendChild - body에 요소 붙이기

 

// <h1> 요소 생성 
const h1 = document.createElement('h1');
// <h1> 안에 text 추가
h1.textContent = 'TO DO LIST';
// body에 <h1> 요소 연결
document.body.appendChild(h1);

// <input> 요소 생성
const input = document.createElement('input');
// body에 <input> 요소 연결
document.body.appendChild(input);

// <button> 요소 생성
const addButton = document.createElement('button');
// <button> text 추가
addButton.textContent = '추가하기';
// body에 <button> 요소 연결
document.body.appendChild(addButton);

 

 

2.  추가하기 버튼 클릭하면 목록 생성 구현

 

• 전체를 감싸는 div 태그, 체크박스, 내용, 제거하기 버튼 생성

 

// 2. 추가하기 버튼 클릭하면 목록 생성
addButton.addEventListener('click', () => {
        // 목록 전체를 감싸는 div
        const div = document.createElement('div');
        // body와 연결
        document.body.appendChild(div);

        // 체크박스
        const checkbox = document.createElement('input');
        // <input> 타입 checkbox
        checkbox.type = 'checkbox';
        // <div>와 연결
        div.appendChild(checkbox);

        // 목록 내용
        const span = document.createElement('span');
        // addButton 클릭하면 span에 input.value 넣기
        span.textContent = input.value;
        // <div>와 연결
        div.appendChild(span);

        // 제거하기 버튼
        const deleteButton = document.createElement('button');
        // <button> textContent 넣기
        deleteButton.textContent = '제거하기';
        // <div>와 연결
        div.appendChild(deleteButton);
        }
    })

 

3. 목록 구현

 

1. input에 value가 빈값이 아니면 코드 실행, 빈값이면 코드 실행 X
   •  if (input.value !== ' ') { 조건식이 true이면 실행되는 코드}
2. 목록 추가후 input.value 비워주기
   • input.value = ' ';
3. 목록 추가후 input 자동 포커스
   • input.focus();
4. 체크박스 체크하면 목록 줄 긋기, 해제하면 줄 긋기 취소
   • change 이벤트
   • if (checkbox.checked) {조건식이 true이면 실행되는 코드}
   • 조건(삼항) 연산자 

// 줄긋기, 해제 (if문)
checkbox.addEventListener('change', () => {
	if (checkbox.checked) {
    		div.style.textDecoration ='line-through';
	} else {
		div.style.textDecoration ='';
	}

// 조건 연산자
checkbox.addEventListener('change', () => {
	div.style.textDecoration = event.target.checked ? 'line-through' : '';
})

 

 

// 2. 추가하기 버튼 클릭하면 목록 생성
addButton.addEventListener('click', () => {
    // 1) input에 value 빈값이 아니면 코드 실행, 빈값이면 코드 실행 X
    if (input.value !== '') {
        const div = document.createElement('div');
        document.body.appendChild(div);

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        div.appendChild(checkbox);
        // 2) checkbox 체크되면 목록 줄긋기, 해제하면 원래대로
        // if...else문 또는 조건부 연산자 활용
        checkbox.addEventListener('change', () => {
            if (checkbox.checked) {
                div.style.textDecoration ='line-through';
            } else {
                div.style.textDecoration ='';
            }
        })

        const span = document.createElement('span');
        span.textContent = input.value;
        // 3) 할 일 추가된 시점에 input.value 내부 비워주기
        // 4) input 자동 포커스
        input.value = '';
        input.focus();
        div.appendChild(span);

        // 제거하기 버튼
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '제거하기';
        div.appendChild(deleteButton);
        }
    })

 

 

4. 목록 제거하기 버튼 클릭시 삭제하기 구현

 

• .removeChild()
• div.parentNode.removeChild(div)

 

// 제거하기 버튼
const deleteButton = document.createElement('button');
deleteButton.textContent = '제거하기';
// deleteButton 클릭시 <div> 제거
deleteButton.addEventListener('click', () => {
	div.parentNode.removeChild(div);
});
div.appendChild(deleteButton);

 

5. input.value 엔터로 입력 구현

 

• 'keyup' 이벤트
• if (event.key === "Enter") { 실행 코드}

 

input.addEventListener('keyup', (event) => {
    if (event.key === "Enter") {
    	실행 코드
    }
}

 

 

6. 중복 줄이기

 

• 중복되는 함수로 외부로 빼주고, 함수이름으로 호출해서 사용한다.

 

// 4. 코드 중복 제거
const addTodo = () => {
    if (input.value !== '') {
        const div = document.createElement('div');
        document.body.appendChild(div);
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.addEventListener('change', () => {
            if (checkbox.checked) {
                div.style.textDecoration = 'line-through';
            } else {
                div.style.textDecoration = '';
            }
        })
        div.appendChild(checkbox);
        
        const span = document.createElement('span');
        span.textContent = input.value;
        // 1. 할 일 추가된 시점에 input.value 내부 비워주기
        // 1. input 자동 포커스
        input.value = '';
        input.focus();
        div.appendChild(span);
        
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '제거하기';
        // 3. 제거하기 버튼 누르면 목록에서 지우기
        deleteButton.addEventListener('click', () => {
            div.parentNode.removeChild(div);
        })
        div.appendChild(deleteButton);
    }
}

// 화면에 Element 추가하기
const h1 = document.createElement('h1');
h1.textContent = "할 일 목록";
document.body.appendChild(h1);

const input = document.createElement('input');
input.addEventListener('keyup', (event) => {
    // 3. 엔터키로 추가
    if (event.key === "Enter") {
        addTodo();
    }
})
document.body.appendChild(input);

const addButton = document.createElement('button');
addButton.textContent = "추가하기"; 
document.body.appendChild(addButton);

//1.추가하기 버튼 누르면 추가되는 할 일 목록 만들기
addButton.addEventListener('click', () => {
    addTodo();
})