JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<input type="text" id="add-input">
<button onclick="add()">新增</button>
<button onclick="exportButton()">匯出</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",
    isCompleted: false
  },
  {
    title: "繳電話費",
    category: "important",
    isCompleted: false
  },
  {
    title: "採買本週食材",
    category: "urgent",
    isCompleted: false
  },
];

function render() {
  const root = document.querySelector('#root');
  const ul = document.createElement('ul');
  root.textContent = "";
  root.append(ul);
  for(let index in todos){
   const todo = todos[index];
   const li = document.createElement('li');
   const span = document.createElement('span');
   const span2 = document.createElement('span');
   const toggleBtn = document.createElement('button');
   const deleteButton = document.createElement('button');
   const category = document.querySelector('.category');
   ul.append(li);
   li.append(span);
   li.append(span2);
   li.append(toggleBtn);
   li.append(deleteButton);
   span.textContent = todo.title;
   span2.className = 'isComplete';
   span2.textContent = '（已完成）';
   if (todo.category === 'important') {
      span.style.color = 'orange';
   } else if (todo.category === 'urgent') {
      span.style.color = 'red';
   }
  
   
   if (todo.isCompleted) {
      toggleBtn.textContent = '[標示為未完成]';
      span2.style.display = 'block';
   } else {
      toggleBtn.textContent = '[標示為已完成]';
      span2.style.display = 'none';
   }
   toggleBtn.onclick = () => {
      if (todo.isCompleted) {
        todo.isCompleted = false;
      } else {
        todo.isCompleted = true;
      }
      render();
   };
   deleteButton.textContent = '刪除';
   deleteButton.onclick = () => {
      todos.splice(todo,1);
      render();
   };
}
   
  
}
render();
function exportButton()
{
   let text = '';
   let num = 1;
   for(let index in todos){
    
    const todo = todos[index];
    if (todo.category === 'important') {
       text = text + `${num.toString()}. *${todo.title}* `;
    }else if (todo.category === 'urgent') {
       text = text + `${num.toString()}. **${todo.title}** `;
    }...