JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

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

CSS

li {
    margin-bottom: 5px;
}

button {
    margin-left: 10px;
}

JavaScript

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

function render() {
  var root = document.querySelector('#root');
  root.textContent = '';
  var ul = document.createElement('ul');
  root.append(ul);
  for (const index in todos) {
    var todo = todos[index];
    var li = document.createElement('li');
    var todoSpan = document.createElement('span');
    var stateSpan = document.createElement('span');
    var deleteBtn = document.createElement('button');
    var toggleBtn = document.createElement('button');
    ul.append(li);
    li.append(todoSpan);
    li.append(stateSpan);
    li.append(toggleBtn);
    li.append(deleteBtn);
    deleteBtn.textContent = '刪除';
    todoSpan.textContent = todo.title;
    stateSpan.textContent = '(已完成)';
    
    if (todos[index].isCompleted) {
      toggleBtn.textContent = '標示未完成';
      stateSpan.style.display = 'inline-block';
    } else {
      toggleBtn.textContent = '標示已完成';
      stateSpan.style.display = 'none';
    }
    
    if (todo.category == 'important') {
      todoSpan.style.color = 'orange';
    } else if (todo.category == 'urgent') {
      todoSpan.style.color = 'red';
    }

    deleteBtn.onclick = () => {
      console.log(index);
      todos.splice(index,1);
      render();
    };

    toggleBtn.onclick = () => {
      if (todos[index].isCompleted) {
        todos[index].isCompleted = false;
      } else {
        todos[index].isCompleted = true;
      }
    
      render();
    };

  }
}

render();

function add() {
  var inputTodo = document.querySelector('#input-todo');
  var eventCat = document.querySelector('#event-cat');
  var eventCatIndex = eventCat.selectedIndex;
  var eventValue = eventCat.options[eventCatIndex].value;
  var newTodo = {
    title: inputTodo.value, 
    category: eventValue,
  };
 ...