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" 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" onclick="outputItem()">匯出清單</button>
    </div>
    
</div>

CSS

button{
  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;
}

.todo-list li span::before{
  content: '✤';
  margin-right: 0.5em;
}
.todo-list li:hover{
  opacity: 1;
}
.todo-list button{
  padding: 5px;
  margin-right: 5px;
  background-color: #C34A36;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.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 span = document.createElement('span');
  let deleteBtn = document.createElement('button');
  
  if(todoValue == ''){
    alert("請輸入待辦事項");
  }else{
    todoList.append(li);
    li.append(span); 
    li.append(deleteBtn);
    span.textContent = todoValue;
    deleteBtn.textContent = "🗑️";
    deleteBtn.onclick = deleteItem;    
  }
  
  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.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() + ")" + item.children[0].textContent + " ";
    num++;
  }
  }
  alert("今日待辦: " + output);  
}

function bgColorHandler(){
 	let eventValue = event.target.options[event.target.selectedIndex].value;
	if(eventValue === "important"){
  	todo.className = "important";
  }else if(eventValue === "urgent"){
  	todo.className = "urgent";
  }else{
  	todo.className = "normal";
  }
  
  console.log(todo.className)
}