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>
<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;
}

li {
  list-style: none;
  width: 64vw;
  border: 1px solid;
  border-radius: 15px;
  padding: 5px;
  margin: 8px;
}

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

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

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

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');
  console.log(list);
  console.log(span);
  
  check.type = 'checkbox';
  span.textContent = content;
  list.append(li);
  li.append(check);
  li.append(span);
}