to do list

by Fanny60714

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>待辦事項</h2><hr>
<input type="text" id="content" placeholder="內容" />
<button onclick="add()">新增</button>
<button onclick="out()">匯出</button>
<ul id="list">

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

CSS

/*body {
  display: flex;
  justify-content: center;
  align-items: center;
}*/

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

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

input {
  border-radius: 15px;
  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;
}

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);
  
  btn.textContent = "刪除";
  btn.className = "delete";
  check.type = 'checkbox';
  span.textContent = content;
  list.append(li);
  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){
  	text = text + n.toString()+ ". " + i.children[1].textContent + " ";
    n++;
  }
  alert(text);
}