<body>
  <h2 id="clock">00:00:00</h2>
  <form class="hidden" id="login-form">
    <input 
      required
      maxlength="15"
      type="text" 
      placeholder="what is your name?" />
    <button>Log In</button>
  </form>
  <h1 class="hidden" id="greeting"></h1>
  <form id="todo-form">
    <input type="text" placeholder="Write a To Do and Press Enter" required />
  </form>
  <ul id="todo-list"></ul>
  <div id="quote">
    <span></span>
    <span></span>
  </div>
</body>

// todo.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function padintTodo(newTodo) {
  const li = document.createElement("li");
  const span = li.appendChild(document.createElement("span"));
  span.innerText = newTodo;
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  padintTodo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);