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 id='addBtn' onClick="add()">+</button>
    <select id='select' onchange="selectChange()">
         <option value="normal">一般</option>
        <option value="important">重要</option>
        <option value="urgent">緊急</option>
    </select>
  </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;
}

select{
  color: white;
  background: green;
  width: fit-content;
  padding: 3px 6px;
  margin: 0px;
  border: 1px solid green;
}


ul{
     color:green;
     display: contents;
}
span{
     color:black;
     margin-left: 6px;
}
li{
  background: yellow;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.normal{
   background: #78fa8e;
}
.important{
   background: #ffc864;
}
.urgent{
   background: #ff6f6f;
}


.input_important{
   border: 3px solid #ffc864 !important;

}
.input_urgent{
   border: 3px solid #ff6f6f!important ;
}

./* input_normal{
   border: 3px solid green !important ;
} */


.hiddrenBtn{
  display: none;
}

JavaScript

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


// 刪除 單項
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;
    
    const todoType = ul.children[i].className
    if(todoType === 'important'){
    	result += `${i+1}. *${todo}*,  `
    }else if(todoType === 'urgent'){
    	result += `${i+1}. **${todo}**,  `
    }else {
    	result += `${i+1}. ${todo},  `
    }
  }
  alert(`今日待辦: ${result}`)
}
function important(){
	//input
  input.classList.remove('input_urgent')
  input.classList.add('input_important')
  //addBtn
   addBtn.classList.remove('urgent')
   addBtn.classList.add('important')
   //select
   select.classList.remove('urgent')
   select.classList.add('important')
}

function urgent(){
	 // input 
   input.classList.remove('input_important')
   input.classList.add('input_urgent')
   // addBtn 
   addBtn.classList.remove('important')
   addBtn.classList.add('urgent')
   // select
   select.classList.remove('important')
   select.classList.add('urgent')
}

function normal(){
   input.classList.remove('input_important')
   input.classList.remove('input_urgent')
   
   addBtn.classList.remove('important')
   addBtn.classList.remove('urgent')
   
   select.classList.remove('important')
   select.classList.remove('urgent')
}


function selectChange(){
	const currentSelectValue =...