const checkDelate = document.querySelector('.check_delate');
 
function addd(){ //add버튼이 눌릴 때
    let id = Date.now();
    if (text.value==false){   //만약 text입력칸에 아무것도 안 적고 add를 눌렀다면,
        alert('할 일을 입력해주세요')  //경고창이 뜨고
    }else{  //그게 아니라 무언가 쓰여져 있다면
        // 추가할 태그들 상수 지정하기
        const li = document.createElement('li');//li태그 추가
        const check = document.createElement('input'); //체크박스 하나 만들고
        const span = document.createElement('span'); //글자 넣을 스판 태그 만들고
       
       
       
       
        //위 상수들에게 클래스 추가하기
        span.id='tt'  // span에 tt id속성값 추가
        xButton.classList.add('btbt')  // 삭제 버튼에 class="btbt"인 클래스 속성값을 추가한다.
        label.htmlFor='chchc'+id //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.
        check.id='chchc'+id// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.하지만 id는 각기 다른 속성값을 가져야 하므로 id라는 변수 추가함.
 
       
 
        //하위 항목에 추가할 타겟 정함
        ul.appendChild(li)   // ul태그에 li태그가 하위요소로 들어감
        li.appendChild(span)   // li태그에 span태그가 하위요소로 들어감
       
 
        span.textContent = text.value  //span의 텍스트는 text에서 입력한 값과 같다.
        check.type='checkbox' // 상수 체크의 input타입은 체크박스이다.
 
        check.addEventListener('click',function (){
            span.classList.toggle('checkC') //toggle은 해당 속성값이 있으면 삭제를, 없으면 생성을 해주는 역할이다.
            span.classList.remove('tt')
        }) //체크박스 클릭시 아래 checkClick함수 실행
 
        checkDelate.addEventListener('click',function(){ //선택삭제 버튼을 누른다면, 이 항수가 실행될 것이다.
            let spsp = span.parentElement;  //스판 태그의 부모 태그를 spsp변수명으로 지정해 놓음
            let conn = confirm('선택 항목들을 삭제하시겠습니까?') //선택 삭제 버튼을 누르면 이 confirm창이 뜸 그걸 conn변수명으로 지정함.
            if (conn==true){ //만약 확인창에서 사용자가 확인을 눌렀다면,
                if (span.classList==''){ //만약 확인을 눌렀만 span태그의 클래스 속성값이 없다면~
                    alert('선택한 항목이 없습니다.') //경고창으로 성택한 항목이 없다고 나오고
                }else{ //그게 아니라면
                    spsp.remove(); //변수로 지정해놓은 spsp를 삭제한다.
                }
            }else{ //사용자가 취소를 눌렀다면
                return false;
            }
        })
     
} }
button.addEventListener('click',addd)