검증한 할 일을 목록에 추가하기

3강에서는 입력값의 앞뒤 공백을 제거하고 빈 입력을 막았습니다. 이번에는 검증을 통과한 글자를 목록에 추가합니다. 여러 항목을 차례로 추가할 수 있지만, 삭제와 저장 기능은 아직 없습니다.

목록 항목 만들기

3강의 script.js에서 기존 요소 선택 코드 아래에 목록 선택을 추가합니다. HTML의 목록은 이미 id="todo-list"로 준비되어 있습니다.

const todoList = document.querySelector('#todo-list');

클릭 처리 함수에서 빈 입력을 검사한 뒤, 기존의 console.log 대신 다음 코드를 넣습니다.

const item = document.createElement('li');
item.textContent = todoText;
todoList.append(item);
todoInput.value = '';
todoInput.focus();

createElement('li')는 새 목록 항목을 만들지만, 그 자체로 화면에 붙이지는 않습니다. textContent에 검증한 글자를 넣고 append()로 ul에 붙이면 목록에 나타납니다. textContent는 입력을 HTML 태그가 아닌 글자로 다룹니다.

마지막 두 줄은 입력창을 비우고 다시 선택해 다음 할 일을 입력하기 편하게 합니다. 빈 입력일 때는 앞서 실행한 return 때문에 이 코드에 도달하지 않습니다.

전체 파일로 실습하기

앞 강의의 세 파일을 수정해도 되고, 아래 전체 내용을 index.html 하나로 저장해 브라우저에서 열어도 됩니다. 아래 파일은 같은 HTML과 CSS, 변경된 JavaScript를 한 문서에 모았습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>나의 할 일</title>
  <style>
    body { margin: 0; padding: 32px 16px; background: #f1f5f9; color: #1e293b; font-family: sans-serif; }
    .todo-app { max-width: 480px; margin: 0 auto; padding: 24px; background: white; border-radius: 12px; }
    label { display: block; margin-bottom: 8px; }
    .input-row { display: flex; gap: 8px; }
    input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #94a3b8; border-radius: 6px; font: inherit; }
    button { padding: 10px 16px; border: 0; border-radius: 6px; background: #2563eb; color: white; font: inherit; cursor: pointer; }
    #message { min-height: 1.5em; color: #b91c1c; }
    li { margin: 8px 0; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <main class="todo-app">
    <h1>나의 할 일</h1>
    <label for="todo-input">할 일</label>
    <div class="input-row">
      <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
      <button id="add-button" type="button">추가</button>
    </div>
    <p id="message" role="status"></p>
    <ul id="todo-list"></ul>
  </main>
  <script>
    const todoInput = document.querySelector('#todo-input');
    const addButton = document.querySelector('#add-button');
    const message = document.querySelector('#message');
    const todoList = document.querySelector('#todo-list');

    addButton.addEventListener('click', function () {
      const todoText = todoInput.value.trim();
      if (todoText === '') {
        message.textContent = '할 일을 입력해 주세요.';
        return;
      }
      message.textContent = '';
      const item = document.createElement('li');
      item.textContent = todoText;
      todoList.append(item);
      todoInput.value = '';
      todoInput.focus();
    });
  </script>
</body>
</html>

직접 확인하기

1. 빈 입력이나 공백만 넣고 추가를 누릅니다. 안내 문구가 나타나고 항목은 추가되지 않아야 합니다.
2. 책 읽기 를 입력하고 추가합니다. 안내가 사라지고 앞뒤 공백을 뺀 책 읽기가 목록에 나타나야 합니다.
3. 산책하기를 추가합니다. 첫 항목이 유지된 채 두 번째 항목이 아래에 나타나는지 확인합니다.
4. 입력창이 비워지고 다시 선택되는지 확인합니다. 페이지를 새로고침하면 저장 기능이 없어 목록이 비워집니다.

목록이 바뀌지 않으면 파일을 저장하고 새로고침한 뒤 개발자 도구의 콘솔 오류를 확인하세요. 특히 HTML의 todo-list와 JavaScript의 #todo-list가 일치하는지 살펴봅니다.

연습

서로 다른 할 일 세 개를 추가해 순서를 확인하세요. 이어서 <b>책 읽기</b>를 입력하면 태그가 적용되지 않고 입력한 글자 그대로 표시되는지도 살펴보세요. 다음 강의에서는 각 항목에 삭제 버튼을 붙입니다.