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>TodoList</title>
</head>
<body>
<form id="form">
<input type="text" id="todo_input" />
<button type="submit">Add</button>
</form>
<ul id="list"></ul>
<script src="index.js"></script>
</body>
</html>
index.ts
const form = <HTMLFormElement>document.getElementById("form");
const input = <HTMLInputElement>document.getElementById("todo_input");
const list = <HTMLLIElement>document.getElementById("list");
const todolist = [];
const addTodo = (e: { preventDefault: () => void }) => {
e.preventDefault();
if (input.value.trim() === "" || null) {
return;
}
const li = <HTMLLIElement>document.createElement("li");
const button = <HTMLButtonElement>document.createElement("button");
button.innerText = "삭제하기";
//할일 생성
li.innerText = input.value;
li.appendChild(button);
list.appendChild(li);
//삭제
button.addEventListener("click", () => {
list.removeChild(li);
});
input.value = "";
};
form.addEventListener("submit", addTodo);
https://brgndy.me/ 로 옮기는 중입니다 :)