待辦事項清單

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

 button {
  border-radius:5px;
  border-width:thin;
  padding:3px;
  margin-left:5px;
}
 button: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 addCancel = document.createElement("button")
  addCancel.textContent = "刪除"
  function cancel() {event.target.parentElement.remove()}
  addCancel.onclick = cancel
  
  let list = document.getElementById("todoList")
  li.append(addTodo)
  li.append(addCancel)
  list.append(li)
  
  document.getElementById("clear").remove();
}