JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

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

CSS

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

JavaScript

var todos = [
   {
      title: "倒垃圾",
      category: "normal",
      isCompleted: false
   },
   {
      title: "繳電話費",
      category: "important",
      isCompleted: false
   },
   {
      title: "採買本週食材",
      category: "urgent",
      isCompleted: false
   },
];
let todoList = JSON.parse(localStorage.getItem('saveList')) || todos;
console.log(todoList);

render();

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

   let ul = document.createElement('ul');
   for( let x in todoList){
      let todo = todoList[x];
      let li = document.createElement('li');
      let span = document.createElement('span');
      let span2 = document.createElement('span');
      let span3 = document.createElement('span');
      let delBtn = document.createElement('button');
      delBtn.onclick = () => {
         todoList.splice(x, 1)
         render();
      };

      if(todo.isCompleted == false){
         span2.textContent = "[標示為已完成]";
         span3.textContent = "   ";
      }else{
         span2.textContent = "[標示為未完成]";
         span3.textContent = "  (已完成） ";
      }

      span2.onclick = () =>{
         todo.isCompleted = !todo.isCompleted;
         render();
      }

      if(todo.category == "urgent"){
         span.style.color = "red"
      }else if(todo.category == "important"){
         span.style.color = "blue"
      }else{
         span.style.color = "black"
      }
      
      span.textContent = todo.title;
      delBtn.textContent = "刪除";
      li.append(span);
      li.append(span3);
      li.append(span2);
      li.append(delBtn);
      ul.append(li);
   }
      root.append(ul);
}

function add(){
   let input = document.querySelector('input');
   let select = document.querySelector('select');
   let text = input.value;
   let change = select.value;
   todoList.push({
      title: text,
      category: change,
      isCompleted: false,
   });
   render();
   input.value = "";
   select.value =...