<html>
<head>
<title>Todo List</title>
<style>
#todo-list {
list-style-type: none;
}
</style>
</head>
<body>
<form id="todo-form">
<input name="description" type="text" placeholder="What needs to be done?" />
</form>
<ul id="todo-list"></ul>
<button id="todo-completed">Clear Completed</button>
<script>
const todoForm = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");
const clearCompletedButton = document.getElementById("todo-completed");
todoForm.onsubmit = submitItem;
clearCompletedButton.onclick = clearCompleted;
function submitItem (event) {
event.preventDefault();
const formData = new FormData(event.target);
const description = formData.get("description");
event.target.reset();
const item = document.createElement("li");
const tick = document.createElement("input");
tick.setAttribute("type", "checkbox");
tick.onclick = togglItem;
item.appendChild(tick);
const itemDescription = document.createTextNode(description);
item.appendChild(itemDescription);
todoList.appendChild(item);
}
function togglItem (event) {
if (event.target.checked) {
event.target.parentNode.style.textDecoration = "line-through";
} else {
event.target.parentNode.style.textDecoration = "none";
}
}
function clearCompleted (event) {
const checkedItems = todoList.querySelectorAll("li > input:checked");
for (let checkedItem of checkedItems) {
checkedItem.parentNode.remove();
}
}
</script>
</body>
</html>