JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input_todos">

<button onclick="add()">新增</button>

<select id="select_urgency">
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>

<div id="root">
  <!-- 內容 -->
</div>

<button onclick="export_todos()">匯出</button>
<button onclick="save_todos()">儲存</button>

CSS

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style-type: none;
}

JavaScript

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

if(localStorage.getItem("save_todos_data")){

    todos = JSON.parse(localStorage.getItem("save_todos_data"));
}



function render() {

    //To-do List -> TDL 參數名稱

    const root = document.querySelector('#root');       //內容顯示區域
    root.textContent = "";    //清空root

    // const TDL_input = document.createElement('input');    //input_todos
    // TDL_input.setAttribute('id', 'input_todos');
    // root.append(TDL_input);

    // const TDL_addbtn = document.createElement('button');    //button_addtodos
    // TDL_addbtn.textContent = 'add';
    // TDL_addbtn.onclick = add;
    // root.append(TDL_addbtn);

    const TDL_ul = document.createElement('ul');
    root.append(TDL_ul);

    for (const index in todos) {

        const TDL_li = document.createElement('li');
        if (todos[index].category == 'normal') {
            TDL_li.style.color = '#00DB00';
        }
        else if (todos[index].category == 'important') {
            TDL_li.style.color = '#C4C400';
        }
        else if (todos[index].category == 'urgent') {
            TDL_li.style.color = '#AE0000';
        }

        const TDL_completed_btn = document.createElement('button');   //顯示完成按鈕

        if (todos[index].isCompleted == false) {
            TDL_completed_btn.textContent = '標示為已完成';
        }
        else if (todos[index].isCompleted == true) {
            TDL_completed_btn.textContent = '標示為未完成';
        }

        TDL_completed_btn.onclick = () => {

            if (todos[index].isCompleted == false) {
                todos[index].title = todos[index].title + '[已完成]';
                todos[index].isCompleted = true;
                TDL_completed_btn.textContent = '標示為未完成';
            }
   ...