todo lists

by superyngo

HTML

<input type="text">
<button onclick="add()">新增</button>
<hr>
<div id="root">
</div>

JavaScript

var todos = [
  {
    title: "倒垃圾",
  },
  {
    title: "繳電話費",
  },
  {
    title: "採買本週食材",
  },
];

function render() {
  console.log(todos);
  const root = document.querySelector("#root");
  root.textContent = "";
  const ul = document.createElement("ul");
  root.append(ul);
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.textContent = todo.title;
    ul.append(li);
  });
}

function add() {
  const toAdd = document.querySelector("input");
  todos.push({ title: toAdd.value });
  console.log(toAdd);
  render();
}

render();