step1-03/demo/index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <h1>todos</h1>
      <div class="addTodo">
        <input class="textfield" placeholder="add todo" />
        <button class="submit">Add</button>
      </div>
      <nav class="filter">
        <button class="selected">all</button>
        <button>active</button>
        <button>completed</button>
      </nav>
    </header>

    <ul class="todos">
      <li class="todo">
        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
      </li>
    </ul>
    <footer>
      <span><span class="remaining">4</span> items left</span>
      <button class="submit">Clear Completed</button>
    </footer>
  </body>

  <script type="text/javascript">
    function clearInput(selector) {
      document.querySelector(selector).value = '';
    }

    function getTodoText() {
      return document.querySelector('.textfield').value;
    }

    function addTodo() {
      const todo = document.querySelector('.todo');
      const newTodo = todo.cloneNode(true);
      newTodo.querySelector('.title').innerText = getTodoText();
      todo.parentElement.insertBefore(newTodo, todo);

      clearInput('.textfield');
      // updateRemaining();
    }

    function filter(filterName, button) {
      document.querySelector('.selected').classList.remove('selected');
      button.classList.add('selected');
      for (let todo of document.querySelectorAll('.todo')) {
        const checked = todo.querySelector('input').checked == true;
        if (filterName == 'all') {
          todo.hidden = false;
        } else if (filterName == 'active') {
          todo.hidden = checked;
        } else if (filterName == 'completed') {
          todo.hidden = !checked;
        }
      }
    }
  </script>
</html>