1-2. To do list - 클릭 이벤트, 일정 삭제, 일정 수정하기

목차

1. To do list - 날짜 다루기, 일정 추가하기
2. To do list - 클릭 이벤트, 일정 삭제, 일정 수정하기

 

1. 클릭 이벤트 (체크박스, 삭제버튼)

---

 

코드를 확인 하기 전, 코드를 작성하며 맞닥들인 문제점과 해결방안에 대해 정리했다.

 

체크박스에서 발생한 문제점

체크박스를 클릭했으나, 클릭 이벤트가 발생하지 않았다.

체크박스는 일정이 새로 생성 된 후 만들어지고, 각각 다른 인덱스를 갖는다. 때문에 처음 querySelector로 선언해도 맨 처음 것만 선택될 뿐, 나머지는 해당되지 않는 것이었다.

이를 해결하기 위해 카우셀을 만들 때처럼 반복문을 사용했으나, 새로운 리스트를 생성할 때 마다 반복문이 따로 놀기만 했다.

 

체크박스 문제점의 해결

// 체크박스 클릭 이벤트
listCon.addEventListener('click', (e)=> {
    const btn = e.currentTarget.firstElementChild
    const input = e.currentTarget.children[1]
    btn.firstElementChild.classList.toggle('hidden')
    input.classList.toggle('through')
})

// 삭제하기
deleteBtn.addEventListener('click', (e) => {
    li.remove(e.currentTarget)
})

• 해결 방법은 간단했다. e.currentTarget를 사용하는 것이다.

새로 만들어진 일정에 클릭 이벤트를 추가한 뒤, e.currentTarget를 통해 현재 사용자가 선택한 리스트를 알아냈다. 그리고 toggle을 이용해 체크리스트의 효과를 추가 및 제거 시켰다.

 

 

2. 일정 수정하기

---

수정하기 기능에서 발생한 문제점

내가 처음 생각한 코드는 이러했다. p 태그를 만들고, 더블 클릭 시 p 태그를 삭제. input 태그를 넣어 수정이 가능하게 하는 것이었다. 그러나 코드가 지나치게 복잡해지고, 더블 클릭 후 수정 결과를 저장하는 것이 어려웠다.

 

수정하기 문제점의 해결

// 내용 수정하기
editBtn.addEventListener('click', (e)=>{
    const svg = e.currentTarget.firstElementChild
    if (svg.style.fill === `var(--color-blue)`) {
        svg.style.fill = `var(--color--green)`
        listInput.style.outline = 'auto'
        listInput.removeAttribute('readonly')
        listInput.focus()
    } else {
        listInput.setAttribute("readonly", 'readonly')
        svg.style.fill = `var(--color-blue)`
        listInput.style.outline = 'none'
    }
})

• 해답은 유튜브에 있었다.
• p 태그를 사용하지 않고, 처음부터 input 태그를 사용했다. 또, 사용자가 알기 쉽게 수정 버튼을 추가했다.

input을 readonly로 설정해 처음에는 수정이 불가능하게 하고, 수정버튼을 눌러야만 readonly가 해제 되게 만들었다.

유튜브에서는 버튼 안의 innerTEXT로 if문을 작성했으나, 나는 문자가 아닌 아이콘이었기 때문에 아이콘의 색상을 변경하는 방안으로 작성했다.