JSFiddle - React, Tailwind, and code Playground

by yoyosan

HTML

<input type="text" id="item">
<button onclick="add()">新增</button>

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

<div id="root">

JavaScript

let root = document.querySelector('#root');
let todos = [
  {title: "倒垃圾", category: "normal",  isCompleted: false},
  {title: "繳電話費", category: "important", isCompleted: false},
  {title: "採買本週食材", category: "urgent",  isCompleted: false}
];


let render = () => {
  root.textContent = '';
  let ul = document.createElement('ul');

  for (let index = 0; index < todos.length; index++) {
    let todo = todos[index];
    let li = document.createElement('li'); 
    ul.append(li);

    let span = document.createElement('span'); //創造span  用來放陣列中的值
    span.textContent = todo.title;
    if (todo.category ==='important') {
      span.style.color = 'orange';
    } else if (todo.category === 'urgent') {
      span.style.color = 'red';
    };

    let debutton = document.createElement('button'); //創造 一個 刪除 按鈕
    debutton.textContent = '刪除';
    li.append(span);

    debutton.onclick = () => {   //將 刪除按鈕加上onclick
      todos.splice(index, 1);
      render();

    }


    let finish = document.createElement('span');
    let toggleBtn = document.createElement('button');

    finish.style.fontWeight = 400;
    finish.style.color = 'red';
    finish.textContent = '(已完成)';


    if (todos[index].isCompleted) {
      toggleBtn.textContent = '標示未完成';
      finish.style.display = 'inline-block';
    } else {
      toggleBtn.textContent = '標示已完成';
      finish.style.display = 'none';
    }
    li.append(finish);
    li.append(toggleBtn);
    li.append(debutton);

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



  }
  root.append(ul);

}


function add(){

  let item = document.querySelector('#item').value;
  let category = document.querySelector('#category').value;
  if (item) {
    todos.push({title:item, category:category});
    render();
  }
  document.querySelector('#item').value = '';

}



render();