JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
  <div class="wrap">
    <div class="item">
    <h1>新增待辦項目</h1>
    <input type="text"    id="content">
    <select  id="select" onchange="input_color()">
        <option >一般</option>
        <option >重要</option>
        <option >緊急</option>
    </select>
   <button onclick="addNew()">Add</button>
    </div>
  </div>
  
  <div class="wrap wrap_task">
   <div class="title">
      <h1>待辦清單</h1>
   </div>
    
    <ul id="task"></ul>
  </div>
  
  <div class="wrap wrap_output">
    <input type="button" value="匯出為純文字" class="output_text" onclick="alert_window()">
  </div>
  

  <script src="./myjs.js">
  </script>
</body>
</html>

CSS

*{
    padding:0px;
    margin:0px;
    box-sizing:border-box;
  }
  
  
  html,body{
    width:100%;
    height:100%;
    background-color:#6E0D25;
  }
  
  
  li{
    display:flex;
    align-items:center;
  }
  
  button, .rm, .finish_btn{
    background-color:#904E55;
    color:white;
    font-weight:600;
    border:none;
    cursor:pointer;
    margin-left: 1rem;
    padding:2px 5px;
    font-size:16px;
    border-radius:5px;
  }
  
  .finish_btn{
    background-color:green;
  }
  
  span{
    font-size:30px;
    font-size:600;
    color:#6A381F;
  }
  
  .title{
    text-align:center;
  }
  
  .wrap{
   background-color:#FFFFB3;
   padding:2rem;
   margin:1rem;
   display:flex;
   justify-content:center;
   border-radius:20px;
  }
  
  
  .wrap_task{
    flex-direction:column;
  }
  
  
  
  #task li{
    display: flex;
    justify-content:space-around;
  }
  
  .wrap.wrap_output{
    background-color:#6e0d25;
  }
  
  .output_text{
    padding:1rem;
    border-radius:15px;
    border:none;
    background-color:#ffffb3;
    color:#6e0d25;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
    transition: background-color 0.5s ease-in;
  }
  
  .output_text:hover{
    background-color:#F9AB55;
    
  }

  .general{
    color: green;
  }

  .important{
    color: orange;
  }

  .emergency{
    color: red;
  }
  
  .inputColor_general{
    background-color:#5FBB97;
  }
  
  .inputColor_important{
    background-color: #EDB88B;
  }

  .inputColor_emergency{
    background-color:#F7C1BB ;
  }
  
  .finish_word{
    font-size: 16px;
    color:green;
    font-weight:900;
  }

JavaScript

function addNew(){
    let content = document.getElementById("content").value;
    let ul = document.getElementById("task");
    let li = document.createElement("li");
    let sp = document.createElement("span");
    let rm_btn = document.createElement("input");
    rm_btn.type = "button";   
    rm_btn.value = "remove";  
    rm_btn.onclick = remove;
    rm_btn.classList.add("rm");
    
    let finish_word = document.createElement("span");
    finish_word.textContent = "已完成";
    finish_word.style.display = "none";
    finish_word.className = "finish_word";
    
    //finish_word.style.display = "none";
    let finish_btn = document.createElement("input");
    finish_btn.type = "button";
    finish_btn.value = "標示已完成"
    finish_btn.className = "finish_btn";
    finish_btn.onclick = finish;    
    
    
    ul.appendChild(li).appendChild(sp).append(content)
    li.appendChild(finish_word);
    li.appendChild(finish_btn);
    li.appendChild(rm_btn);
    
    document.getElementById("content").value = "";

    let select = document.getElementById("select"); //取得select
    let index = select.selectedIndex; //取得選取的Option位置
    if(select.options[index].value == "一般"){
        sp.classList.add("general");
    }
    else if(select.options[index].value == "重要"){
        sp.classList.add("important");
    }
    else if(select.options[index].value == "緊急"){
        sp.classList.add("emergency");
    }
}
  
  function remove(e){
      e.target.parentElement.remove();
  }
  
	
  //完成鍵按鈕
  function finish(){
     if(event.target.value == "標示已完成"){
    		event.target.value ="標示未完成";
        event.target.style.background="#904E55";
        event.target.parentElement.childNodes[1].style.display="inline";
        event.target.parentElement.childNodes[1].textContent="已完成";
        event.target.parentElement.childNodes[1].style.color="green";
        //console.log(event.target.parentElement.childNodes[0].textContent);
     }
     else if(event.target.value =="標示未完成"){
     	 ...