childevnote/Todo-List

Web에서 구현한 Todo list 프로젝트입니다.

개인 프로젝트 : Todo list 만들기

사용 스택

📂 파일 구조

├─📂assets - 사용할 이미지들
│  └─📂icons
│    └─🖼️images(svg)
│ 
├─📂styles - 적용한 스타일
│  └─🖌️main.css
│  └─🖌️general.css
│  └─🖌️header.css
│ 
└─🗒️index.html
└─🚀app.js

최종 결과

주요 기능

editTodo(할 일 수정) 함수

function editTodo(index) {
  const $todoText = $todoList.children[index].querySelector('.todo');
  const $paragraph = $todoText.querySelector('p');

  const $input = document.createElement('input');
  $input.type = 'text';
  $input.className = 'todo-input';
  $input.value = $paragraph.textContent;

  $todoText.removeChild($paragraph);
  $todoText.appendChild($input);
  $input.focus();

  $input.addEventListener('blur', () => {
    todoList[index].content = $input.value;
    saveTodoList();
    renderTodoList();
    console.log("[update] " + index + " element edited to " + $input.value);
  });
}

$paragraph.textContent값을 input.value로 넘기고, $paragraph 삭제 후 바로 input 태그 추가, input에 focus를 잡아줌

blur 시 입력을 마친 것으로 판단하고 input.value를 해당 content에 저장

텍스트를 입력 칸으로 바꾸고 다시 텍스트로 바꾸는 과정 구현

checkbox 체크표시가 새로고침 시 유지되지 않는 이슈 해결

function renderTodoList() {
  $todoList.innerHTML = '';
  todoList.forEach((todo, index) => {
    const $newTodo = createTodoItem(todo.content, index);
    $todoList.appendChild($newTodo);
    const $checkbox = document.getElementById('checkbox-' + index);
    $checkbox.checked = todoList[index].completed;
  });
  console.log("[system] todolist rendered");
}

...

function toggleComplete(index) {
  if (index >= 0 && index < todoList.length) {
    todoList[index].completed = !todoList[index].completed;
    saveTodoList();
    const $checkbox = document.getElementById('checkbox-' + index);
    $checkbox.checked = todoList[index].completed;
  }
  console.log("[update] " + index + " element completed toggle changed");
}

렌더될 때 저장되어 있는 체크박스 값을 한 번 검사해서 그 값으로 체크박스 활성화