待辦事項清單

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>
  <button onclick="saveToLocalStorage()">儲存</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;
}

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

.normal{}

.important{
  color:orange;
}

.urgent{
  color:red;
}

JavaScript

function add() {
	let addTodo = document.createElement("span");
  addTodo.textContent = document.querySelector("#todo").value;
  addTodo.classList.add("mission")
  let li = document.createElement("li");
  
  let addDone = document.createElement("button");
  addDone.textContent = "標示為已完成";
  let doneText = document.createElement("span")
  doneText.textContent="（已完成）"
  doneText.style.display = "none"
  
  function doneToggle () {
    doneText.style.display = doneText.style.display === "none" ? "inline" : "none";
    addDone.textContent = doneText.style.display === "none" ? "標示為已完成" : "標示為未完成"
  };
  addDone.onclick = doneToggle
  
  let addCancel = document.createElement("button");
  addCancel.textContent = "刪除"
  function cancel() {event.currentTarget.parentElement.remove()};
  addCancel.onclick = cancel
  
  let list = document.querySelector("#todoList")
  li.append(addTodo)
  li.append(doneText)
  li.append(addDone)
  li.append(addCancel)
  list.append(li)
  
  let selectElement = document.querySelector('#urgencyType');
	let selectedValue = selectElement.value;
	li.classList.add(selectedValue);
  addTodo.classList.add(selectedValue);
  
	document.querySelector("#todo").value = ""
  if (document.querySelector("#clear")) {document.querySelector("#clear").remove();}
}

function output() {
  let outputTodo = document.querySelectorAll(".mission");
  let outputText = "";

  outputTodo.forEach((todo, index) => {
    if (todo.classList.contains("normal")) {
      outputText += (index + 1) + ". " + todo.textContent + " ";
    } else if (todo.classList.contains("important")) {
      outputText += (index + 1) + ". " + "*" + todo.textContent + "*" + " ";
    } else if (todo.classList.contains("urgent")) {
      outputText += (index + 1) + ". " + "**" + todo.textContent + "**" + " ";
    }
  });

  alert(outputText);
}


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