sh4869/todo.css

## todo.css
body {
  font-family: 'Open Sans', sans-serif;
  background-color: WhiteSmoke;
  margin: 15px;
}

#to-do-input {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  padding: 5px 0px 5px 5px;
  width: 100%;
  border: 1px solid Silver;
  background-color: White;
}

#to-do-list #finish-list {
  padding:0px;
  margin:0px;
  list-style-position:inside;
}

#to-do-list li {
  padding:5px 0px 5px 5px;
  border-bottom: 1px dotted Silver;
}

#to-do-list li:hover {
  color: red;
}

## todo.dart
import 'dart:html';

//add HTML_tag element
InputElement toDoInput;
UListElement toDoList;
UListElement finishList;
ButtonElement toDoClear;
ButtonElement finishClear;

void main() {
  //gets an Element object
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector('#to-do-list');
  toDoClear = querySelector('#to-do-clear');
  finishList = querySelector('#finish-list');
  finishClear = querySelector('#finish-clear');
  toDoInput.onChange.listen(addToDoItem);
  toDoClear.onClick.listen(deleteAllElements);
  finishClear.onClick.listen(deletefinshElements);
}

void addToDoItem(Event e) {
  var newToDo = new LIElement();
  newToDo.text = toDoInput.value;
  newToDo.onClick.listen((e) {
    finishList.children.add(newToDo);
  });
  toDoInput.value = '';
  toDoList.children.add(newToDo);
}

void deleteAllElements(Event e) {
  toDoList.children.clear();
  toDoInput.value = '';
}

void deletefinshElements(Event e){
  finishList.children.clear();
}

## todo.html
<!DOCTYPE html>

<html>
  <head>
	<meta charset="utf-8">
	<title>Todo</title>
	<link rel="stylesheet" href="todo.css">
  </head>
  <body>
	<h2 id="to-do-title">Procrastinator's Todo</h2>

    <button id="to-do-clear">Delete ALL</button>

	<div>
	  <input id="to-do-input" type="text" placeholder="What needs to be done?"> </input>
	</div>

	<div>
	  <ul id="to-do-list">
	  </ul>
	</div>

    <h3>Finish task</h3>

	<button id="finish-clear">Delte finish task</button>

    <div>
	  <ul id="finish-list">
	  </ul>
	</div>

	<script type="application/dart" src="todo.dart"></script>
	<script src="packages/browser/dart.js"></script>
  </body>
</html>
	body {
	font-family: 'Open Sans', sans-serif;
	background-color: WhiteSmoke;
	margin: 15px;
	}

	#to-do-input {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	padding: 5px 0px 5px 5px;
	width: 100%;
	border: 1px solid Silver;
	background-color: White;
	}

	#to-do-list #finish-list {
	padding:0px;
	margin:0px;
	list-style-position:inside;
	}

	#to-do-list li {
	padding:5px 0px 5px 5px;
	border-bottom: 1px dotted Silver;
	}

	#to-do-list li:hover {
	color: red;
	}
	import 'dart:html';

	//add HTML_tag element
	InputElement toDoInput;
	UListElement toDoList;
	UListElement finishList;
	ButtonElement toDoClear;
	ButtonElement finishClear;

	void main() {
	//gets an Element object
	toDoInput = querySelector('#to-do-input');
	toDoList = querySelector('#to-do-list');
	toDoClear = querySelector('#to-do-clear');
	finishList = querySelector('#finish-list');
	finishClear = querySelector('#finish-clear');
	toDoInput.onChange.listen(addToDoItem);
	toDoClear.onClick.listen(deleteAllElements);
	finishClear.onClick.listen(deletefinshElements);
	}

	void addToDoItem(Event e) {
	var newToDo = new LIElement();
	newToDo.text = toDoInput.value;
	newToDo.onClick.listen((e) {
	finishList.children.add(newToDo);
	});
	toDoInput.value = '';
	toDoList.children.add(newToDo);
	}

	void deleteAllElements(Event e) {
	toDoList.children.clear();
	toDoInput.value = '';
	}

	void deletefinshElements(Event e){
	finishList.children.clear();
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>Todo</title>
	<link rel="stylesheet" href="todo.css">
	</head>
	<body>
	<h2 id="to-do-title">Procrastinator's Todo</h2>

	<button id="to-do-clear">Delete ALL</button>

	<div>
	<input id="to-do-input" type="text" placeholder="What needs to be done?"> </input>
	</div>

	<div>
	<ul id="to-do-list">
	</ul>
	</div>

	<h3>Finish task</h3>

	<button id="finish-clear">Delte finish task</button>

	<div>
	<ul id="finish-list">
	</ul>
	</div>

	<script type="application/dart" src="todo.dart"></script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>