<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 50px;
}
input {
width: 200px;
height: 40px;
font-size: 20px;
text-align: left;
}
button {
width: 70px;
height: 50px;
font-size: 18px;
margin: 5px;
}
ul {
list-style: none;
padding: 0;
margin: 20px 0;
}
</style>
<body>
<input id="user-input" type="text" placeholder="Enter a task...">
<button onclick="todo()">add</button>
<ul id="list"></ul>
<script>
function todo() {
const task = document.getElementById("user-input")
let user_input = task.value;
const item = document.createElement("li");
item.innerHTML = `<span onclick="complete(this)">${user_input}</span> <button onclick="deleteTask(this)">delete</button>`;
const list = document.getElementById("list");
list.appendChild(item);
task.value = '';
}
function deleteTask(element) {
element.parentElement.remove();
}
function complete(element) {
if (element.style.textDecoration === "line-through") {
element.style.textDecoration = "none";
} else {
element.style.textDecoration = "line-through";
}
}
</script>
</body>
</html>
