TODO APP HTML CSS JavaScript
/*https://gist.githubusercontent.com/victorkane/fd1a062813692ce13c9e1ec6ee8bc2e6/raw/1e97cf5d8867ce397e25e1859930032db5c3ae81/index.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TODO List (tasks)</title>
<style>
.todo-done {
text-decoration: line-through;
}
.todo-new {
text-decoration: none;
}
</style>
</head>
<body>
<h1>TODO List (tasks)</h1>
<h2>App</h2>
<p>Add todos (tasks) to a todo list, cross them out when done</p>
<input type="text" id="myText" placeholder="Add todo"> <button onclick="myFunction()">Add task</button>
<div id = "todolist"> </div> <button onclick="removeItem()">Remove completed items</button>
<h2>Challenges for the next class</h2>
<ol>
<li>- [ ] When I add a task, the input field is reset to empty</li>
<li>- [ ] When I click on a task a second time, it is no longer "done" (toggle crossed out)</li>
<li>- [ ] When I click on the button <strong>Remove done items</strong> those crossed out as done are removed from the list</li>
<li>- [ ] Place a "done" button next to each</li>
<li>- [ ] Make it possible to add items by just pressing the <Enter> key</li>
</ol>
<script>
function myFunction() {
var para = document.createElement("P");
para.setAttribute("class", "todo-new");
para.setAttribute("onclick", "toggle(event)");
var theText = document.getElementById("myText");
s = theText.value;
var textnode = document.createTextNode(s);
para.appendChild(textnode);
document.getElementById("todolist").appendChild(para);
}
function toggle(event) {
if(event.target.getAttribute("class")==="todo-new"){
event.target.setAttribute("class", "todo-done")
}
}
function removeItem() {
}
</script>
</body>
</html>
Techh Jork