쌓고 쌓다

[JavaScript] ToDoList 만들기 본문

프로그래밍/JavaScript

[JavaScript] ToDoList 만들기

승민아 2023. 1. 9. 11:05

실행 결과

기능

1. 텍스트 입력 후 추가버튼 클릭 시 목록에 추가.

2. 목록의 좌측 체크박스를 클릭시 취소선 발생.

3. 삭제 버튼 클릭시 목록을 제거

 

코드 구현

1. body 부분

<body>
    <h1>To Do List</h1>
    <input id="toDo" type="text">
    <button id="addButton">추가</button>

    <div id="toDoList">
        <div>
            <input type="checkbox">
            <span>example</span>
            <button>삭제</button>
        </div>
    </div>
</body>

 

아직 html과 css를 공부하지 않아서 div가 정확히 무엇인지 모르겠으나

영역을 나누는 태그 같다. 이것을 할 일 리스트를 분할하였고 그 안에서도 div로 목록마다

영역을 만들어 추가하는 방식이다.

 

목록을 넣기위해 입력하는 부분의 id를 "toDo"

목록의 내용을 추가하는 버튼을 "addButton"

목록들을 가지는 목록 리스트를 "toDoList"로 분할하였다.

 

각 할일 목록은 아래의 형태로 구성한다.

할일 목록 구성

체크박스를 위한 input 태그와

내용을 위한 span

해당 목록 삭제를 위한 button 태그.

이 div가 하나의 할 일이 되어 toDoList의 아래에 아래의 형태로 추가될 것이다.

목록 형태

 

2. script 부분

document.addEventListener('DOMContentLoaded', () => {
    const toDo = document.querySelector('#toDo')
    const addButton = document.querySelector('#addButton')
    const toDoList = document.querySelector('#toDoList')

    addButton.addEventListener('click', (event) => {
        const item = document.createElement('div') // div

        const checkBox = document.createElement('input') // 완료
        checkBox.setAttribute('type','checkbox')


        const text = document.createElement('span') // 내용
        text.textContent = toDo.value

        const removeButton = document.createElement('button') // 삭제
        removeButton.textContent = '삭제'


        removeButton.addEventListener('click', (event) => {
            event.currentTarget.parentNode.parentNode.removeChild(event.currentTarget.parentNode)
})

        checkBox.addEventListener('change', (event) => {
            if(checkBox.checked){
                text.style.textDecorationLine = "line-through"
            }else{
                text.style.textDecorationLine = "none"
            }
        })
                
        item.appendChild(checkBox)
        item.appendChild(text)
        item.appendChild(removeButton)

        toDoList.appendChild(item)
        toDo.value = ''
        })


})

 

코드 설명

각 태그들을 가져오는 부분이다.

id를 통해 문서 객체를 가져온다면 아이디 선택자를 이용해야 한다.

#아이디 형태로 가져온다.

 

 

이제 아래의 코드는 addButton(추가) 버튼을 클릭했을 때 이벤트를 구현했다.

addButton.addEventListener('click', (event) => {
    ...
}

이제부터 설명하는 모든 코드들은 addButton의 click 이벤트에 속해 실행되는 코드들이다.

 

 

이제 toDoList의 아래에 넣을 목록을 구성해야 한다.

div는 우리가 추가할 할 일의 영역을, checkBox는 할일의 좌측 체크박스, text는 할일의 내용, removeButton은 삭제버튼.

 

checkBox에 setAttribute로 type 속성을 checkBox로 설정한다.

text는 우리가 입력한 입력한 내용이 담긴 toDo를 가져와 초기화시킨다.

 

 

삭제 버튼을 클릭하면 그 목록만 제거해야 한다.

그래서 event.currentTarget은 현태 이벤트가 발생한 removeButton이고,

그것의 parentNode는 목록의 div가 된다.

div 아래에 우리의 체크박스와 할 일과 삭제버튼이 존재하게 작성했기 때문이다.

우리가 작성한 목록의 div의 또 parentNode는 toDoList로 할일 목록을 가지는 리스트를 가리킨다.

우리가 삭제할 목록은 toDoList의 자식 item이다.

자식 item은 무엇일까? removeButton의 부모이다.

 

 

목록의 왼쪽 체크박스를 누르면 내용의 텍스트 스타일을 바꾸는 부분이다.

 

 

item의 아래에 체크박스, 내용, 삭제버튼을 보낸다.

즉, item을 toDoList의 아래로 보내면 목록 리스트 아래에 목록을 보내는 형태가 완성된다.

목록을 추가했다면 우리가 목록의 내용을 위해 입력한 toDo의 내용을 비워주자.

 

+ 삭제를 어떻게 구현할까 생각했었는데

게시물이 생성될 때마다 카운트하여 그 카운트한 것을 key로 담아 게시물의 Data 속성으로

추가하여 삭제 시에 document.querySelector(`[data-key="${key}"]`)로 찾아 삭제하면 된다.

 

item.setAttribute('data-key', key)로 속성을 추가하면 된다.

이때 HTML의 Data- 속성이라고 원하는 속성 이름을 지정하여 추가가 가능하다.

저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript] private 속성과 메소드 + get, set 키워드  (0) 2023.01.10
[JavaScript] 상속과 오버라이드(오버라이딩)  (0) 2023.01.09
[JavaScript] 클래스 (+객체)  (0) 2023.01.08
[JavaScript] 예외 처리, 예외 객체, 예외 강제 발생  (0) 2023.01.07
[JavaScript] localStorage 객체, focus, blur 이벤트  (0) 2023.01.07
'프로그래밍/JavaScript' Related Articles more
Comments