Create and manage a todo list with prioritized tasks

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">
</div>

JavaScript

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


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.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);
    li.append(debutton);
    debutton.onclick = () => {
      todos.splice(index, 1);
      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();