JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<input type="text" id="add-input">
<button onclick="add()">新增</button>
<select class="category">
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>
<div id="root">
</div>

JavaScript

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

function render() {
  const root = document.querySelector('#root');
  const ul = document.createElement('ul');
  root.textContent = "";
  root.append(ul);
  for(let item in todos){
   const index = todos[item];
   const li = document.createElement('li');
   const span = document.createElement('span');
   const button = document.createElement('button');
   const category = document.querySelector('.category');
   ul.append(li);
   li.append(span);
   li.append(button);
   span.textContent = index.title;
   if (index.category === 'important') {
      span.style.color = 'orange';
   } else if (index.category === 'urgent') {
      span.style.color = 'red';
   }
   button.textContent = '刪除';
   button.onclick = () => {
      todos.splice(index,1);
      render();
   };
}
   
  
}
render();
function add() {
  const addInput = document.querySelector('#add-input');
  const NeedValue = {title: addInput.value};
  todos.push(NeedValue);
  render();
  addInput.value = '';
};