Create and display task list with addition and deletion functionality

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>

</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;
}

JavaScript

const addAll = [];

function add() {
  let addthing = document.getElementById('add').value.trim();
  if (addthing === '') {
    alert('請輸入項目。');
    return;
  }

  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();
  }


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



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

  addAll.push(addthing);

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

}
function changWord() {
  let printWord = "待辦事項清單：\n";
  let countTime = 1;
  for (let singleItiem of addAll) {
    printWord += countTime + '. ' + singleItiem + '\n';
    countTime +=1
  }
  alert(printWord);
}