victorkane · April 19, 2016 00:55
diff --git a/index.html b/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>
	<!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>