[Javascript] Momentum 만들기 - todo list 구현

오늘 진행할 작업은 todo list 코드 리팩토링 겸 구현하는 부분이다.

기존 구현했던 todo와 다르게 날짜를 따로 입력받도록 구현할 것이고, 이 날짜는 다음 작업인 날짜를 활용한 마감될 todo와 앞으로 다가올 todo를 나누는 기능을 구현할 예정이다.

 

1. HTML 코드 작성

<div class='todo-div'>
    <form class='todo-form'>
      <input class='todo-date' type="date">
      <input class='todo-task' type="text" placeholder='Enter task'>
    </form>
</div>

 

- todo를 입력하기 위한 부분의 구현이다. 마감 날짜를 입력할 date 타입의 input 태그와 진행할 작업의 이름을 입력할 text 타입의 input 태그 두 가지로 이루어져 있다.

- form 태그는 입력된 두 개의 input 태그의 값을 사용하여 todo를 생성하고 localStorage에 저장하는 이벤트를 다루게 될 것이다.

 

<div class='today'>
      <h3>Today</h3>
      <div class='today-todo-div'>
        <ul class='today-todo-ul'></ul>
      </div>
</div>

 

- form 태그에서 입력된 todo가 보여질 구문이다. ul 태그 내에 li 태그의 형태로 사용자가 입력한 todo가 보여질 예정이다.

 

2. Todo 기능 구현

앞으로 다가올 todo와 완료된 todo를 보여주는 기능을 제외하고 우선 todo를 입력받아 화면에 보여주는 기능을 구현한다.

todo 기능 구현을 크게 나누면 4가지로 나눌 수 있다.

 

1. todo를 저장하는 기능

function submitHandler(e) {
    e.preventDefault()
    const date = todoDate.value
    const task = todoTask.value

    todoDate.value = ''
    todoTask.value = ''
    paintTodo(task, date)
}

 

- form 태그에 입력된 값들을 처리하는 구문이다.

- 날짜와 작업 이름을 입력하고 난 뒤 전송을 하게 되면 해당 작업명과 날짜를 todo를 보여주는 기능 함수인 paintTodo의 인자로 전달해준다.

- paintTodo에서 입력받은 정보를 사용자에게 보여주고 localStorage에 저장한다.

 

2. todo를 화면에 보여주는 기능

function paintTodo(task, date) {
    const li = document.createElement('li')
    const delBtn = document.createElement('button')
    const finBtn = document.createElement('button')
    const span = document.createElement('span')
    const newId = ++ID

    delBtn.innerText = 'del'
    delBtn.addEventListener('click', deleteClickHandler)
    finBtn.innerText = 'fin'
    // finBtn.addEventListener('click', finishClickHanlder)

    span.innerText = task
    
    li.appendChild(span)
    li.appendChild(delBtn)
    li.appendChild(finBtn)
    li.id = newId
    todayTodoUl.appendChild(li)
    
    const todoObj = {
        id: newId,
        task: task,
        date: date
    };

    CURRENT_TODO_LIST.push(todoObj)
    localStorage.setItem(CURRENT_TODO, JSON.stringify(CURRENT_TODO_LIST))
}

 

- 저장할 작업의 이름(task)와 날짜(date)를 입력받아 localStorage에 저장하고, 사용자에게 화면에 제공할 수 있는 기능이다.

- 각각의 todo는 작업의 이름과 삭제 버튼, 완료 버튼으로 구성하였다.

   - 완료 버튼의 경우 이번에 작업하지는 않았다.

- 각 구성요소들을 ul 태그에 추가한다.

- 입력된 값을 localStorage에 저장한다.

 

3. todo를 불러오는 기능

function init() {
    const todos = localStorage.getItem(CURRENT_TODO)

    if(todos !== null) {
        const parsedTodos = JSON.parse(todos)
        todayTodoUl.classList.add(SHOW)
        
        parsedTodos.forEach((todo) => {
            paintTodo(todo.task, todo.date)
        })
    }
    todoForm.addEventListener('submit', submitHandler)
}

 

- localStorage에 저장된 todo를 불러와 사용자에게 보여주는 기능이다.

- localStorage가 비어있지 않을 때 저장된 값을 불러온다.

- form 태그에 event listener를 달아준다.

 

4. todo 삭제 기능

function deleteClickHandler(e) {
    const button = e.target
    const li = button.parentNode
    todayTodoUl.remove(li)

    const filteredTodos = CURRENT_TODO_LIST.filter((todo) => {
        return todo.id !== parseInt(li.id)
    })
    CURRENT_TODO_LIST = filteredTodos
    localStorage.setItem(CURRENT_TODO, JSON.stringify(CURRENT_TODO_LIST))
}

 

- todo를 삭제하는 기능이다.

- 누른 버튼의 li의 id값을 todo와 비교하여 제거한 후 제거된 리스트로 업데이트한다.

 

작업 결과

작업의 결과

 

- todo가 잘 저장되고 잘 제거되는 것을 확인할 수 있다.

- 새로고침을 해도 저장된 todo가 잘 불러와진다.

 

- 다음 작업으로는 fin 버튼을 눌렀을 때 Time machine으로 옮겨가는 기능과 날짜에 따라서 분류해서 보여주는 기능을 구현하려고 한다.