by topherPedersen

TODO List in VanillaJS (for teaching purposes)

<!DOCTYPE html>
<html>
<head>
<!-- Mobile Friendly Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Vanilla TODO</h1>
<input type="text" id="newItem">
<button onclick="addToList();">+</button>
<ul id="todoList"></ul>
<script>
function addToList() {
var task = document.getElementById("newItem").value;
var thingtoadd = document.createElement("LI");
thingtoadd.innerHTML = task;
thingtoadd.id = Math.random().toString();
var removebutton = document.createElement("BUTTON");
removebutton.innerHTML = "X";
removebutton.onclick = function() {
removeFromList(thingtoadd.id);
};
thingtoadd.appendChild(removebutton);
// thingtoadd.innerHTML += removebutton;
var todoList = document.getElementById("todoList");
todoList.appendChild(thingtoadd);
/*
thingtoadd.onclick = function() {
removeFromList(thingtoadd.id);
};
*/
console.log(task);
}
function removeFromList(id) {
var todoList = document.getElementById("todoList"); // parent
var itemToBeRemoved = document.getElementById(id); // child
todoList.removeChild(itemToBeRemoved);
}
</script>
</body>
</html>
view raw vanilla-todo.html hosted with ❤ by GitHub
 

topherPedersen