JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

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

JavaScript

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

function render() {
  var root = document.querySelector('#root');
  root.textContent = '';
  var ul = document.createElement('ul');
  root.append(ul);
  for (var item of todos) {
    var li = document.createElement('li');
    var span = document.createElement('span');
    ul.append(li);
    li.append(span);
    span.textContent = item.title;
  }
}

render();

function add() {
  var inputTodo = document.querySelector('#input-todo');
  var newTodo = {title:inputTodo.value};
  todos.push(newTodo);
  render();
	inputTodo.value = '';
}