待辦事項清單

by dfg312546

HTML

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

<hr>
<div class="listContainer">
  <ul id="todoList">
    <li id="clear">無事項</li>
  </ul>
</div>
<br>
<div class="displayContainer">
  <button class="outputButton" onclick="output()">匯出為純文字</button>
</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
}

.displayContainer{
  display: flex;
  justify-content: center;
}

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

li {
  color:#ff8787;
}

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.currentTarget.parentElement.remove()}
  addCancel.onclick = cancel
  
  let list = document.getElementById("todoList")
  li.append(addTodo)
  li.append(addCancel)
  list.append(li)
  
	document.getElementById("todo").value = ""
  if (document.getElementById("clear").) {document.getElementById("clear").remove();}
}

function output() {
  let outputTodo = document.querySelectorAll("span");
  let outputText = "";
  for (let i = 0; i < outputTodo.length; i++) {
  	outputText += (i + 1) + ". " + outputTodo[i].textContent + " ";
  }
  alert(outputText);
}