로컬 스토리지를 활용한 Todo 예제 정답입니다.

절대 제가 작성한 코드가 무조건 적인 정답은 아니며,

여러분의 생각과 다르다면 그것이 정답일 것입니다~~

• HTML 코드
• CSS 코드
• 전체 JS 코드

<aside> ☝ 로직

</aside>

1. 할 일 목록을 저장할 빈 배열을 선언

let todos = [];

2. DOMContentLoaded 이벤트가 발생하면, 즉 문서 로딩이 완료되면 함수들을 실행

<aside> ☝ 로직

1. 기존에 todos에서 로컬스토리지에 저장된 값이 있다면 꺼내오고 없다면 빈 배열을 할당
2. 렌더링 함수를 호출 (밑에서 구현 예정) </aside>

document.addEventListener('DOMContentLoaded', () => {
  todos = JSON.parse(localStorage.getItem('todos')) || [];
  renderTodos(todos);
});

3. 할 일을 추가하는 함수

<aside> ☝ 로직

1. addTodo 함수 구현
2. input을 가져오고, 새로운 투두에 그 인풋의 값을 넣어줌
3. 만약 새로운 투두가 있다면, 투두리스트에 추가해주고
4. 로컬 스토리지에도 추가해줌
5. 렌더링 함수를 호출하고, 인풋의 값은 비워줌 </aside>

function addTodo() {
  const input = document.getElementById('todoInput');
  const newTodo = input.value.trim();
  if (newTodo) {
    todos.push(newTodo);
    localStorage.setItem('todos', JSON.stringify(todos));
    renderTodos(todos);
    input.value = '';
  }
}

4. 할 일 목록을 렌더링하는 함수

<aside> ☝ 로직

1. list를 가져오고, list의 HTML을 빈 값으로 할당
2. todos배열을 순회하면서, li 요소를 생성
3. li 요소의 값은 todo로 채워줌
4. delete 버튼을 생성하고 값은 Delete로 채워줌
5. delete 버튼을 클릭했을 때 removeTodo 함수를 호출
6. removeTodo 함수는 (밑에서 구현 예정)
7. li 요소의 자식으로 버튼을 추가하고
8. list의 자식으로 li를 추가 </aside>

function renderTodos() {
  const list = document.getElementById('todoList');
  list.innerHTML = '';

  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.textContent = todo;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = () => removeTodo(index);

    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

5. 할 일을 삭제하는 함수