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" />
      <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{
  outline: none;
}
.input-wrap{
  display: inline-block;
  width: 400px;
  text-align: center;
}
.btn-wrap{
  display: inline-block;
  width: fit-content;
}
#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;
  background-color: #DFF1F8;
  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;
  box-shadow: 1px 1px 1px #ccc;
  cursor: pointer;
}

JavaScript

function add(){
  let todoValue = document.getElementById('todo').value;
  let todoList = document.getElementById('todo-list');
  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;    
  }
}

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){   
		output = output + "(" + num.toString() + ")" + item.children[0].textContent + " ";
    num++;
  }
  alert("今日待辦: " + output);  
}