JSFiddle - React, Tailwind, and code Playground

by 81ue_lan

HTML

<div class="wrap">
    <div class="input-wrap">
      <label for="todo" id="label-todo">事項:</label>
      <input type="text" id="todo" name="to-do"/>
      <select id="select-task" name="" onchange="bgColorHandler()">
        <option value="normal">一般</option>
        <option value="important">重要</option>
        <option value="urgent">緊急</option>
      </select>
      <div class="btn-wrap">
        <button id="btn-add" class="btn" onclick="add()">新增</button>
      </div>
    </div>
    
    <div class="todo-list-wrap">
      <h2 class="todo-list-title">TO DO LIST</h2>
      <ul class="todo-list" id="todo-list"></ul>
      <div class="btn-wrap">
        <button id="btn-output" class="btn" onclick="outputItem()">匯出清單</button>
    </div>
    
</div>

CSS

.btn{
  border: 1px solid #2980B9;
  border-radius: 999px;
  box-shadow: 1px 1px 1px #ccc;
  box-sizing: border-box;
  font-weight: 900;
  cursor: pointer;
}
.wrap{
  width: fit-content;
  margin: auto;
}
#label-todo{
  font-weight: 600;
  color: #0083B0;
}
#todo{
  width: 200px;
  padding: 5px 10px;
  border: 2px solid #2980B9;
  border-radius: 100px;
  box-sizing: border-box;
}
#todo:focus,
#select-task:focus{
  outline: none;
}
.input-wrap{
  display: inline-block;
  width: 400px;
  text-align: center;
}
.btn-wrap{
  display: inline-block;
  width: fit-content;
}
#select-task{
   padding: 3px 5px;
   border: 2px solid #2980B9;
   border-radius: 5px;
 }
#btn-add{
   padding: 0.3rem 0.5rem;
}
#btn-output{
   padding: 0.5rem 0.5rem;
}
.todo-list-wrap{
  width: 300px;
  margin: auto;
}
.todo-list{
  padding: 5px;
  list-style: none;
}
.todo-list-title{
  margin: 20px 0 0;
  text-align: center;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #666;
}
.todo-list li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  margin: 0.3rem 0;
  text-indent: 0.5rem;
  border-radius: 5px;
  color: #555;
  opacity: 0.9;
}

.text-todo::before{
  content: '✤';
  margin-right: 0.5em;
}
.todo-list li:hover{
  opacity: 1;
}
.list-btn-wrap{
  display: flex;
  width: 35%;
}
.btn-delete,.btn-done{
  padding: 5px;
  margin: 0 3px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn-delete{ background-color: #C34A36; }
.btn-done{ background-color: #FFEFBA; }

.important{ background-color: #f7b733; }
.urgent{ background-color: #FF8066; }
.normal{ background-color: #DFF1F8; }

JavaScript

const todoList = document.getElementById('todo-list');
const task = document.getElementById('select-task');
const todo = document.getElementById('todo');

function add(){
	let todoValue = todo.value;
  let taskValue = task.value;
  let li = document.createElement('li');
  let todoText = document.createElement('span');
  let doneText = document.createElement('span');
  let btnWrap = document.createElement('div');
  let deleteBtn = document.createElement('button');
  let doneBtn = document.createElement('button');
  
  if(todoValue == ''){
    alert("請輸入待辦事項");
  }else{
    todoList.append(li);
    li.append(todoText);
    li.append(doneText);
    li.append(btnWrap);
   	btnWrap.append(deleteBtn);
    btnWrap.append(doneBtn);
    
    todoText.textContent = todoValue;
    todoText.className = "text-todo";
    
    btnWrap.className = "list-btn-wrap";
    
    doneText.textContent = "(已完成)";
    doneText.style.display = "none";
       
    deleteBtn.textContent = "🗑️";
    deleteBtn.className = "btn-delete";
    deleteBtn.onclick = deleteItem;
    
    doneBtn.textContent = "已完成";
    doneBtn.className = "btn-done";
    doneBtn.onclick = done;
  }
  
  if(taskValue === "important"){
  	li.className = li.className + "important";
  }else if(taskValue === "urgent"){
  	li.className = li.className + "urgent";
  }else{
  	li.className = li.className + "normal";
  }
}

function deleteItem(){
     event.target.parentElement.parentElement.remove();
}

function outputItem(){
  let todoList = document.getElementById('todo-list').children;
  var num = 1;
  var output ='';
  
  for(var item of todoList){   	 
    if(item.className === "important"){
  	output = output + "(" + num.toString() + ")" + "*" + item.children[0].textContent + "*" + " ";
    num++;
  }else if(item.className === "urgent"){
  	output = output + "(" + num.toString() + ")" + "**"+ item.children[0].textContent + "**"+ " ";
    num++;
  }else{
  	output = output + "(" + num.toString() + ")" +...