to do list

by Fanny60714

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>待辦事項</h2><hr>
<input type="text" id="content" placeholder="內容" />
<select id="e">
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="emergency">緊急</option>
</select>
<button onclick="add()">新增</button>
<button onclick="out()">匯出</button>
<ul id="list">

</ul>
</body>
</html>

CSS

ul {
  background-color: gray;
  border: 1px dotted;
  border-radius: 15px;
  padding: 8px;
  margin: 24px;
}

ul > li {
  background-color: rgba(250, 250, 250, 0.9);
  list-style: none;
  width: 90%;
  border: 2px solid;
  border-radius: 15px;
  padding: 5px;
  margin: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input {
  border-radius: 15px;
  padding: 5px;
}

select {
  border: 1px solid;
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}

button {
  background-color: #fcc428;
  border: 1px solid #fcc428;
  border-radius: 15px;
  padding: 8px;
  margin: 8px;
}

button:hover {
  background-color: #ebbf44;
}

.delete {
  background-color: red;
  border: 1px solid red;
  color: white;
}

.delete:hover {
  background-color: darkred;
}

.normal {
  border-color: gray;
}

.important {
  border-color: orange;
}

.emergency {
  border-color: red;
}

JavaScript

function add(){
	var content = document.getElementById('content').value;
  console.log(content);
	var list = document.getElementById('list');
  var li = document.createElement('li');
  var span = document.createElement('span');
  var check = document.createElement('input');
  var btn = document.createElement('button');
  console.log(list);
  console.log(span);
  var e = document.getElementById('e');
  var index = e.selectedIndex;
  var evalue = e.options[index].value;
  
  btn.textContent = "刪除";
  btn.className = "delete";
  check.type = 'checkbox';
  span.textContent = content;
  list.append(li);
  li.className = evalue;
  li.append(check);
  li.append(span);
  li.append(btn);
  
  btn.onclick = deleted;
}

function deleted(){
	event.target.parentElement.remove();
}

function out(){
	var n = 1;
  var text = "今日待辦 : ";
  var list = document.getElementById('list').children;
  
  for(var i of list){
  	var c = i.className;
  	if(c == 'important'){
    	text = text + n.toString()+ ". *" + i.children[1].textContent + "* ";
    } else if(c == 'emergency'){
    	text = text + n.toString()+ ". **" + i.children[1].textContent + "** ";
    } else{
    	text = text + n.toString()+ ". " + i.children[1].textContent + " ";
    }
    n++;
  }
  alert(text);
}