待辦事項清單

by dfg312546

HTML

<input id="todo" type="text" class="inputstyle" placeholder="輸入待辦事項"/>
<select id="urgencyType" onchange="inputStyle()">
  <option id="selectNormal" value="normal">一般</option>
  <option id="selectImportant" value="important">重要</option>
  <option id="selectUrgent" value="urgent">緊急</option>
</select>
<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;
}

.normal{}

.important{
  color:orange;
}

.urgent{
  color:red;
}

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 selectElement = document.getElementById('urgencyType');
	let selectedValue = selectElement.value;
	li.classList.add(selectedValue);
  addTodo.classList.add(selectedValue);
  
  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++) {
  	if (outputTodo[i].className==="normal")
  		{outputText += (i + 1) + ". " + outputTodo[i].textContent + " "}
    else if (outputTodo[i].className==="important")
    	{outputText += (i + 1) + ". " + "*"+outputTodo[i].textContent+"*" + " "}
    else if (outputTodo[i].className==="urgent")
    	{outputText += (i + 1) + ". " + "**"+outputTodo[i].textContent+"**" + " "}
  }
  
  alert(outputText);
}

function inputStyle () {
	if (document.getElementById('urgencyType').value=="important") {
  	document.getElementById("todo").style.color = "orange"
  }
  else if (document.getElementById('urgencyType').value=="urgent") {
  	document.getElementById("todo").style.color = "red"
  }
}