Todo v1

const $todos = document.querySelector('.todos'); //ul
const $inputTodo = document.querySelector('.input-todo'); // 입력창
const $custom = document.querySelector('.custom-checkbox'); // 전체체크
const $btn = document.querySelector('.btn'); //완료한것 삭제버튼
let $active = document.querySelector('.active-todos'); //개수 보여주기
let todos = []; //todos라는 빈배열만듬

function render() { //랜더링함수
  let html = '';    //html이라는 변수에 빈문자열 삽입

  todos.forEach(({ id, content, completed }) => {
    html += `<li id="${id}" class="todo-item"><input class="custom-checkbox" type="checkbox" ${completed ? 'checked' : ''} id="ck-${id}"><label for="ck-${id}">${content}</label><i class="remove-todo far fa-times-circle"></i></li>`;
  }); //배열 하나씩 찍으면서 html에 넣어주는 역할 배열안 객체에는 아이디,컨텐츠, 컴플리티드 라는
  프로퍼티가 존재하고 +=로 누적
  
  $active.innerHTML = todos.length; //랜더될때마다 배열 개수확인해서 (길이) 화면출력용


  $todos.innerHTML = html; ul html에 찍어놓은 배열들을 그려준다 누적시킨 코드들이 여기서 html화됨
}

function generateId() {
  return todos.length ? Math.max(...todos.map(todo => todo.id)) + 1 : 1;
} //프로퍼티 id생성하는 함수, todos라는 배열의 맵메소드를 활용해서, 배열의 아이디중 가장큰 id값
을구하고 거기에 1을더한다, 단 todos배열의 길이가 0인경우 못구할 수있으므로 조건을 검사한후
배열이 0이면 무조건1로 고정한다

function toggleCompletedAll(check) {
  todos = todos.map(todo => Object.assign({}, todo, { completed: check }));
}//전체완료 토클키(check라는 매개변수를 받아와서) 빈객체와 todo라는 한줄의 배열에 프로퍼티를 모두
//체크로 변경후 합쳐서 새배열을 만든후, todos에 할당한다. 커스텀.onchange에서 불리언값을 받아온다


$inputTodo.onkeyup = function (e) { //입력창에 keyup이벤트가 발생시 
  const content = $inputTodo.value.trim(); //그 값을 읽어와 양옆의 공백을 제거한후 컨텐츠 변수에 할당
  if (content === '' || e.keyCode !== 13) return; //컨텐츠의 값이 빈배열이거나 엔터키가 아니면 함수종료
  $inputTodo.value = ''; //아닌경우 입력창의 문자열을 비우고

  todos = [{ id: generateId(), content, completed: false }, ...todos]; // id는 제너레이터함수에서 가져온 값, 컨텐츠는 입력한값,
  render(); //컴플리티는 디폴트값 폴스로 지정한후, 다른 tods배열을 풀어서 todos에 할당후 랜더함수 호출
};


$todos.onclick = (e) => { //ul태그가 선택될시 이벤트발생
  if (!e.target.classList.contains('remove-todo')) return; //발생한타겟에, 클래스가없으면 종료
  todos = todos.filter(todo => todo.id !== +e.target.parentNode.id); 배열에 필터메소드를 사용해서, 이벤트발생한 부모의 id프로퍼티와 배열한줄의 id를 비교해서
  render(); // 같지 않은애들을 가져와서 todos에 할당후 랜더 여기서 li에서 가져오는값을 문자열로 변경(+)
};

// eslint-disable-next-line func-names
$todos.onchange = function (e) { //ul에 변동이 생기면 함수실행
  const id = +e.target.parentNode.id; 변동이 있는 부모노드의 id프로퍼티를 가져와서 문자열로 변경시킨후 할당
  todos = todos.map(todo => (todo.id === id ? Object.assign({},todo, { completed: !todo.completed }) : todo));
  render(); //맵 메소드를 통해 한줄의 id와 id를 비교후, 같으면 반전시켜서 합치고, 아닌경우 그대로 todos에 넣고 랜더
};

$custom.onchange = function (e) { //custom이 변동되면 함수실행
  toggleCompletedAll(e.target.checked); //toggleCompletedAll이라는 함수에, 발생된이벤트의체크를 보냄
  render(); 그후랜더 여기서 e.target의 checked값은 true false이므로 인수로 불리언값을 보내줌
};

$btn.onclick = function () { //버튼이 클릭됬을시 함수실행
  todos = todos.filter(todo => !todo.completed); //배열에서 프로퍼티를 true가 아닌애들만 가져와서 todos에 할당후 랜더
  render(); //마치 true인애들이 삭제된것 같은 역할
};

//기본적으로 큰 컨테이너안에 input,todos(ul), footer가 있는구조
//footer안에 모두 완료 check와 label, 완료된것 삭제하기위해 버튼과 남은 개수를 보여주는게 존재

전역변수 5개 함수3개 이벤트 5개로 이루어짐