how to create a todo list in javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo List</title>
<meta name="description" content="Todo List Helper">
<link rel="stylesheet" href="./todo.css">
</head>
<body>
<div>
<span>
<input type="text" id="TextBox" name="TextBox">
<input type="submit" value="Add Todo" onclick = "addItem()"/>
</span>
</div>
<div>
<ol id="TodoList"></ol>
</div>
<script>
function addItem() {
var textbox = document.getElementById("TextBox");
var todoStr = textbox.value;
var list = document.getElementById('TodoList');
var todoItem = document.createElement('li');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "CheckBox";
checkbox.value = false;
checkbox.id = "checkbox_" + todoStr;
var label = document.createElement('label');
label.id = "label_" + todoStr;
label.appendChild(document.createTextNode(todoStr));
todoItem.appendChild(checkbox);
todoItem.appendChild(label);
checkbox.addEventListener("click", () => {
var checked = checkbox.checked;
if (checked) {
label.classList.add("selected-text");
} else {
label.classList.remove("selected-text");
}
});
list.appendChild(todoItem);
textbox.value = "";
console.log("added item: " + todoStr);
}
</script>
</body>
</html>
// put in todo.css file:
//.selected-text {
// text-decoration: line-through
//}