JSFiddle - React, Tailwind, and code Playground

HTML

<div id='app'>
  <div>
      <span class='title'>待辦事項管理</span>
      <button id="exportBtn" onclick="exportHandler()" class='hiddrenBtn'>匯出</button>
  </div>
  <br/>
  <div id='top'>
    <input id='input'/>
    <button onClick="add()">+</button>
  </div>
  
  <ul id='ul'></ul>
 

</div>

CSS

body{
  background:#fffda7
}
#app{
    margin: 3rem;
    justify-content: center;
    display: grid;
}
.title{
  text-align:center;
  color:green;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#input{
   border: 3px solid green;
   margin-right: -5px;
}
button{
  color: white;
  background: green;
  width: fit-content;
  padding: 3px 6px;
  margin: 0px;
  border: 1px solid green;
}
ul{
     color:green;
     display: contents;
}
span{
     color:green;
}
li{
  background: yellow;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.hiddrenBtn{
  display: none;
}

JavaScript

const ul = document.getElementById('ul');
const exportBtn = document.getElementById('exportBtn');
const input = document.getElementById('input');

function deleteFunc() {
  const li = event.target.parentElement
  const spanli = li.querySelector('span').textContent
   const text =  confirm(`${spanli} 確定刪除? `)
   if(text){
        li.remove()
   }
}

function exportHandler(){
  const spans = document.querySelectorAll('#ul span')
 if(ul.children.length === 0){
		alert('無待辦事項')
    return
  }
  console.log('ul.children  ==> ',ul.children)
  
  let result  =''
  for(let i=0; i<ul.children.length; i++){
  	let todo = ul.children[i].children[0].textContent;
    console.log('todo ',todo)
  	result += `${i+1}. ${todo},  `
  }
  alert(`今日待辦: ${result}`)
}

function add() {
  if(!input.value){
   alert('請填寫待辦事項')
   	return;
  }

  const li = document.createElement('li');
  const btn = document.createElement('button');
  btn.textContent = 'X';
  btn.onclick = deleteFunc

  exportBtn.classList.remove('hiddrenBtn')
  
  const span = document.createElement('span');
  span.textContent = input.value;
  ul.append(li)
  li.append(span)
  li.append(btn)
 
  input.value = ''
}