javascript_series6_advantage_of_data_model

by aelgy369

HTML

<input type="text">
<select>
  <option disabled selected>重要程度</option>
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>
<button onclick="add()">新增</button>
<button onclick="exportData()">匯出</button>
<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.textContent = '';
  root.append(ul)
  for (let index in todos) {
    const li = document.createElement('li');
    const span = document.createElement('span');
    const finish = document.createElement('span')
    const finishBtn = document.createElement('button')
    const deleteBtn = document.createElement('button');
    span.textContent = todos[index].title;
    li.append(span, finish, finishBtn, deleteBtn);
    ul.append(li);
    
    // 判斷已完成與未完成
		if (todos[index].isCompleted) {
      finishBtn.textContent = '標示為未完成'
      finish.textContent = '（已完成）';
    } else {
      finishBtn.textContent = '標示為已完成'
      finish.textContent = '';
    }
    // 已完成的按鈕切換
		finishBtn.onclick = () => {
      if (todos[index].isCompleted) {
        todos[index].isCompleted = false;
      } else {
        todos[index].isCompleted = true;
      }
      render();
    }

    deleteBtn.innerText = '刪除'
    // 刪除按鈕
    deleteBtn.onclick = () => {
      todos.splice(index, 1)
      render();
    }
    // 顏色判斷式
    if (todos[index].category == 'important') {
      span.style.color = 'orange';
    } else if (todos[index].category == 'urgent') {
      span.style.color = 'red';
    }

  }
}


function add() {
  const input = document.querySelector('input');
  const select = document.querySelector('select')
  let item = {
    title: input.value,
    category: select.value
  }
  if (input.value.length > 0) {
    todos.push(item)
    render();
    input.value = '';
  } else {
    alert('請輸入正確文字')
  }
}

render()

function exportData() {
  let str = ''
 for (const index in todos) {
	let n =...