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>
    <div class="btn-wrap">
      <button id="btn-add" onclick="add()">新增</button>
    </div>
    <ul class="todo-list" id="todo-list">
       <h2 class="todo-list-title">TO DO LIST</h2>
    </ul>
</div>

CSS

.wrap{
  width: fit-content;
  margin: auto;
}
#label-todo{
  font-weight: 600;
  color: #0083B0;
}
#todo{
  padding: 5px;
  border: 2px solid #2980B9;
  border-radius: 100px;
}
#todo:focus{
  outline: none;
}
.btn-wrap{
  width: fit-content;
  margin: 10px auto;
}
#btn-add{
  padding: 0.5rem 1rem;
  border: 1px solid #2980B9;
  border-radius: 999px;
  box-shadow: 1px 1px 1px #ccc;
  box-sizing: border-box;
  font-weight: 900;
  cursor: pointer;
}
.todo-list{
  padding: 5px;
  list-style: none;
}
.todo-list-title{
  text-align: center;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #666;
}
.todo-list li{
  padding: 5px 0;
  margin: 0.5rem 0;
  text-indent: 0.5rem;
  border-radius: 5px;
  background-color: #DFF1F8;
  color: #555;
}
.todo-list li span::before{
  content: '✤';
  margin-right: 0.5em;
}
.todo-list li:hover{
  opacity: 0.8;
}

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');
  
  console.log(todoList);
  console.log(li);
  console.log(span);
  
  if(todoValue == ''){
  	alert("請輸入待辦事項");
  }else{
    todoList.append(li);
    li.append(span);
    span.textContent = todoValue;
    todoValue = '';
  }

 }