순수 Javascript를 이용해 todolist 만들기

 

간단한 자바스크립트와 html 요소들을 이용해

TODO LIST를 작성해보았다.

 

input 엘리먼트에 입력 후 Add를 누르면

밑의 빈 공간에 해당 문장이 저장되고,

문장을 클릭하면 문장이 사라지는 다소 간단한 Todolist 이다.

 

---

코드

<h1>TODO LIST</h1>
<input class="inputElement">
<button class="buttonElement">Add</button>
<div class="display"></div>
<script>
    const input = document.querySelector('.inputElement')
    const button = document.querySelector('.buttonElement')
    const display = document.querySelector('.display')
    const todos = []

    const render = () => {
        display.innerHTML = todos.reduce((acc, e) => {
            return acc + `<h2 class="todo">${e}</h2>`
        }, '')
        const todolist = document.querySelectorAll('.todo')
        todolist.forEach((e, i) => {
                e.onclick = () => {
                todos.splice(i, 1)
                render()
            }
        })
    }

    button.onclick = () => {
        const newValue = input.value
        todos.unshift(newValue)
        render()

    }

</script>

• forEach는 배열이 가진 각기 요소들을 순회하여 다른 기능을 부여하는 메서드이다.
• querySelectorAll은 뒤 괄호에 오는 클래스명 또는 엘리먼트의 위치를 기억하여, 조건에 부합하는 엘리먼츠들을 위에서 아래 순서로 배열 형태로 저장한다.
• querySelectorAll과 forEach를 합쳐서 이용해볼 수 있다.
• display에 약간의 수정만 가해지더라도 새롭게 요소들을 지정해주어야 한다. 따라서 render()를 재사용성 있게 활용한다.