JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<select name="category" id="category">
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>
<button onclick="add()">新增事項</button>
<button onclick="exportTodos()">匯出</button>
<button onclick="save()">儲存</button>
<div id="root">

</div>

CSS

ul{
  list-style: none;
}

JavaScript

const root=document.querySelector("#root");
let todos = [
  {
    title: "倒垃圾",
    category: "normal",
    isCompleted: false
  },
  {
    title: "繳電話費",
    category: "important",
    isCompleted: false
  },
  {
    title: "採買本週食材",
    category: "urgent",
    isCompleted: false
  },
];
function render(){
  root.innerHTML="";
  for(let index in todos){
    let ul=document.createElement("ul");
    let li=document.createElement("li");
    let span=document.createElement("span");
    let finishSpan=document.createElement("span");
    let toggleBtn=document.createElement("button");
    let deleteBtn=document.createElement("button");
    root.append(ul);
    ul.append(li);
    li.append(span);
    li.append(finishSpan);
    li.append(toggleBtn);
    li.append(deleteBtn);
    finishSpan.textContent="(已完成)";
    finishSpan.style.display="none";
    span.textContent=todos[index].title;
    toggleBtn.textContent="標示為已完成";
    deleteBtn.textContent="刪除";
    if(todos[index].category=="important"){
      span.style.color="#FF8000";
    }else if(todos[index].category=="urgent"){
      span.style.color="#F00";
    }
    if(todos[index].isCompleted==true){
      finishSpan.style.display="";
      toggleBtn.textContent="標示為未完成";
    }
    toggleBtn.onclick=()=>{
      if(todos[index].isCompleted==false){
        todos[index].isCompleted=true;
      }else{
        todos[index].isCompleted=false;
      }
      render();
    }
    deleteBtn.onclick=()=>{
      todos.splice(index, 1);
      render();
    }

  }

}
function add(){
  let event=document.querySelector("[type=text]");
  let color=document.querySelector("#category");
  todos.push({title: event.value, category: color.value, isCompleted: false});
  render();
  event.value="";
  color.value="normal";
}
function exportTodos(){
  let text="";
  num=1;
  for(let todo of todos){
    if(todo.category=="important"){
      text+=num+"."+"*"+todo.title+"*"+" ";
    }else if(todo.category=="urgent"){
     ...