JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

JavaScript

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

render();

function render(){
   const root = document.querySelector('#root');
   root.textContent = "";

   let ul = document.createElement('ul');
   for( x of todos){
      let li = document.createElement('li');
      let span = document.createElement('span');
      span.textContent = x.title;
      li.append(span);
      ul.append(li);
   }
      root.append(ul);
}

function add(){
   let input = document.querySelector('input');
   let text = input.value;
   todos.push({title: text});
   render();
   input.value = "";
}