<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.done {
text-decoration: line-through;
}
</style>
</head>
<body>
<form action="/todos/">
<input type="text" />
<button>Todo</button>
</form>
<ul></ul>
<script>
const form = document.querySelector("form");
const ulTag = document.querySelector("ul");
function addTodo(event) {
// 이벤트를 취소한다.
event.preventDefault();
// 입력 element를 찾고 해당 입력 element의 value 값을 저장한다.
const inputTag = document.querySelector("input");
// li element를 생성 후 input element의 value 값을 데이터로 저장한다
const liTag = document.createElement("li");
liTag.innerText = inputTag.value;
// ul 태그의 자식 태그로 위에서 생성한 li element를 넣는다.
ulTag.appendChild(liTag);
// 삭제 버튼을 생성 후 li 태그의 자식 태그로 넣는다.
const remBtn = document.createElement("button");
remBtn.innerText = "X";
liTag.appendChild(remBtn);
// 삭제 버튼을 클릭하면 해당 li element를 삭제한다
remBtn.addEventListener("click", function (event) {
ulTag.removeChild(liTag);
});
// li element를 클릭하면 취소선이 토글된다.
liTag.addEventListener("click", function (event) {
console.log(event.target);
event.target.classList.toggle("done");
});
inputTag.value = "";
inputTag.focus();
}
form.addEventListener("submit", addTodo);
</script>
</body>
</html>
