Create and manage a to-do list with customizable levels and formatting

HTML

<div id="test">
  <label for="add">項目：
    <input type="text" id="add" placeholder="請輸入你要新增的事項">
  </label>
  <br>
  <button type="submit" onclick ="add()">新增</button>
  <button type="submit" onclick="changWord()">轉為純文字</button>
  <select id="selectLevel" onchange="changecolor()">
    <option value= "normal">一般</option>
    <option value="important">重要</option>
    <option value="urgent">緊急</option>
  </select>


</div>

<br><br>
<div id="app">

</div>

CSS

* {
  font-size: 30px;
  font-weight: 700;
  box-sizing: border-box;
}

#test {
  border: 5px solid #4CAF50;
  border-radius: 12px;
  padding: 20px;
  width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

#app {
  margin: 0 auto ;
  width: 800px;
  padding: 20px;
}

li {
  display: flex;         /* 啟用 flexbox 讓項目內的內容有彈性 */
  justify-content: space-between; /* 讓文字和按鈕兩邊對齊 */
  align-items: center;   /* 讓內容垂直置中 */
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.deleButton {
  font-size: 20px;
  margin-right: 0;
}
. normalitem {
  background-color: none;
}

.importantitem {
  background-color: orange;
}
.urgentitem {
  background-color: rgb(216, 74, 74);
}

JavaScript

const addAll = [];
const addAllLevels = []; 

function add() {
  let addthing = document.getElementById('add').value.trim();
  if (addthing === '') {
    alert('請輸入項目。');
    return;
  }
  let level = document.getElementById('selectLevel').value;
  //取出select的值 加入陣列 用於 純文字 輸出判斷

  let li = document.createElement('li')
  //建立li元素
  let span = document.createElement('span');
  span.textContent = addthing;
  //建立span元素
  let button = document.createElement('button');
  //建立刪除按鈕元素
  button.textContent = '刪除';
  button.className = 'deleButton';
  // button.style.marginLeft = '20px';
  // button.style.fontSize = '20px';
  button.onclick = function() {
    li.remove();

  }
  if (selectLevel.value ==='normal') {
    span.className = 'normalitem';

  }else if (selectLevel.value ==='important') {
    span.className = 'importantitem'
  }else if (selectLevel.value ==='urgent') {
    span.className = 'urgentitem'
  }


  li.append(span);
  li.append(button);



  let app = document.getElementById('app');
  app.append(li)

  addAll.push(addthing);
  addAllLevels.push(level);

  document.getElementById('add').value = '';           

}

function changecolor() {
  const select = document.getElementById('selectLevel');
  const input = document.getElementById('add');
  const selectValue = select.value;
  if (selectValue ==='important') {
    input.className = 'importantitem';
  }else if (selectValue  ==='urgent') {
    input.className = 'urgentitem';
  }else {
    input.className = 'normalitem';

  }
}
function changWord() {
  let printWord = "待辦事項清單：\n";
  let countTime = 1;

  for (let i = 0; i < addAll.length; i++) {
    let item = addAll[i];
    let level = addAllLevels[i];

    if (level === 'urgent') {
      printWord += countTime + '.  * ' + item + ' *\n';
    } else {
      printWord += countTime + '.  ' + item + '\n';
    }
    countTime += 1;
  }

  alert(printWord);
}