JSFiddle - React, Tailwind, and code Playground

by dfg312546

HTML

<input id="todo" type="text" class="inputStyle" placeholder="輸入待辦事項"/>
<button onclick="add()" class="buttonStyle">新增</button>

<hr>
<div class="listContainer">
  <span id="clear">無事項</span>
  <ul id="todoList">
  </ul>
</div>

CSS

.inputStyle{
  border-radius:5px;
  border-width:thin;
  border-color:#000000;
  padding:5px;
}

.buttonStyle{
  border-radius:5px;
  border-width:thin;
  padding:3px;
  margin-left:5px;
}
.buttonStyle:hover{
  background-color:#000000;
  color:#ffffff
}

.listContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  border:dashed;
  border-color:#ffb900;
  border-radius:5px;
}

span {
  color:#ff8787;
  font-weight:bold;
  margin-right:10px;
  letter-spacing: 3px;
}

JavaScript

function add() {
	let addTodo = document.createElement("span");
  let li = document.createElement("li")
  addTodo.textContent = document.getElementById("todo").value
  
  let list = document.getElementById("todoList")
  li.append(addTodo)
  list.append(li)
  
  document.getElementById("clear").remove();
  
  console.log(addTodo)
  console.log(list)
  console.log(li)
}