Skip to content

Instantly share code, notes, and snippets.

@topherPedersen

topherPedersen/vanilla-todo.html

Created December 2, 2019 22:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save topherPedersen/70f557c48eaa176a3a0bafa638804e2b to your computer and use it in GitHub Desktop.
Save topherPedersen/70f557c48eaa176a3a0bafa638804e2b to your computer and use it in GitHub Desktop.
Download ZIP
TODO List App in VanillaJS (for teaching purposes)
Raw
vanilla-todo.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment