Review about todo.js

GunYong·2022년 8월 25일
0

Today I Learned

목록 보기
10/15
post-thumbnail

todo.js

const inputBox = document.querySelector('.todo__input');
const addButton = document.querySelector('.todo__button');
const toDOList = document.querySelector('.to__dos');

const addList = (() =>{
    const list = document.createElement('li');
    if(!inputBox.value){
        alert('Please enter what to do');
      // 입력란에 내용이 없으면 경고문 띄우기
    } else{
        list.innerText = inputBox.value;
        toDOList.appendChild(list);
        inputBox.value = ""; 
      // 입력한 값의 value를 list의 innerText로 해주고 appendChild로 추가시키기
    }
    // when you click toDOList it takes redline
    const checkFinishList = (() => {
        list.style.textDecoration = 'line-through red';
    })
    list.addEventListener('click',checkFinishList);
    //when you doubleclick toDoList it vanishes
    const deleteList = (() => {
        toDOList.removeChild(list);
    })
    list.addEventListener('dblclick',deleteList);
    
})  
addButton.addEventListener('click',addList);

0개의 댓글