// ⭐변수 선언 btn input ul
let btn = document.querySelector('#insertBtn');
let input = document.querySelector('#todoInput')
let ul = document.querySelector('#listUl');
// ⭐btn 클릭
btn.addEventListener('click', addList);
// 💜 05.18)
input.addEventListener('keydown', function(e) {
console.log(e.key);
// 한글은 key: process
if(e.key === 'Enter') addList();
});
// ⭐btn 클릭시 실행되는 함수
// input에 value가 있는지 확인, 없으면 return,
// 있으면 그 값을 li에 넣어주고 li를 ul에 추가
function addList() {
if (!input.value) return; // 아니라면
let li = document.createElement('li'); // li 하나 만들겠다
li.innerHTML = `${input.value}<span>X</span>`;
ul.append(li); // li를 추가하겠다
input.value = ""; // 입력후 input에 값 없애주기
removeEvent(); // 함수호출, 추가될 때마다 함수 하나씩 더 생기니
}
// ⭐X를 클릭했을 때 실행되는 함수
// 클릭한 X의 부모요소를 삭제하기
function removeEvent() {
let spans = document.querySelectorAll('#listUl span'); // 모든 span선택, All로 선택하면 forEach사용가능
spans.forEach(span => span.addEventListener('click', function() {
this.parentElement.remove(); // 나의 부모요소를 찾아서
}))
}
// ⭐ul을 클릭하면 클릭한 대상이 li면 check클래스를 지정,
// check클래스가 있으면 제거
ul.addEventListener('click', function(e) { // 이벤트 객체 e
console.log(e);
if (e.target.nodeName === 'LI') e.target.classList.toggle('check');
// 찾을 수 있음, ↑ 클릭 대상이 li 인지 확인 / 뗏다 붙였다 ★
})
