Sfshaza/index.html

## index.html
<!DOCTYPE html>

<!--
  Copyright (c) 2012, the Dart project authors.
  Please see the AUTHORS file for details.
  All rights reserved. Use of this source code
  is governed by a BSD-style license that can be
  found in the LICENSE file.
-->

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo</title>
    <script async type="application/dart" src="main.dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h2>Todo</h2>

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

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

    <button id="delete-all" type="button"
            style="float:right"> Delete All </button>
  </body>
</html>

## main.dart
// Copyright (c) 2012, the Dart project authors.
// Please see the AUTHORS file // for details.
// All rights reserved. Use of this source code
// is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:html';

InputElement toDoInput;
UListElement toDoList;
ButtonElement deleteAll;

void main() {
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector('#to-do-list');
  toDoInput.onChange.listen(addToDoItem);
  deleteAll = querySelector('#delete-all');
  deleteAll.onClick.listen((e) => toDoList.children.clear());
}

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

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

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

#to-do-list {
  padding: 0;
  margin: 0;
  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;
  cursor: pointer;
}

#delete-all {
  margin-top: 8px;
  background-color: #F8F8F8;
  border: 1px dotted #ccc;
  border-radius: 1em;
  float: right;
}

#delete-all:hover {
  background-color: #ddd;
}
	<!DOCTYPE html>

	<!--
	Copyright (c) 2012, the Dart project authors.
	Please see the AUTHORS file for details.
	All rights reserved. Use of this source code
	is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Todo</title>
	<script async type="application/dart" src="main.dart"></script>
	<script async src="packages/browser/dart.js"></script>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<h2>Todo</h2>

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

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

	<button id="delete-all" type="button"
	style="float:right"> Delete All </button>
	</body>
	</html>
	// Copyright (c) 2012, the Dart project authors.
	// Please see the AUTHORS file // for details.
	// All rights reserved. Use of this source code
	// is governed by a BSD-style license that can be
	// found in the LICENSE file.

	import 'dart:html';

	InputElement toDoInput;
	UListElement toDoList;
	ButtonElement deleteAll;

	void main() {
	toDoInput = querySelector('#to-do-input');
	toDoList = querySelector('#to-do-list');
	toDoInput.onChange.listen(addToDoItem);
	deleteAll = querySelector('#delete-all');
	deleteAll.onClick.listen((e) => toDoList.children.clear());
	}

	void addToDoItem(Event e) {
	var newToDo = new LIElement();
	newToDo.text = toDoInput.value;
	newToDo.onClick.listen((e) => newToDo.remove());
	toDoInput.value = '';
	toDoList.children.add(newToDo);
	}
	body {
	font-family: 'Open Sans', sans-serif;
	background-color: WhiteSmoke;
	margin: 15px;
	color: black;
	}

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

	#to-do-list {
	padding: 0;
	margin: 0;
	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;
	cursor: pointer;
	}

	#delete-all {
	margin-top: 8px;
	background-color: #F8F8F8;
	border: 1px dotted #ccc;
	border-radius: 1em;
	float: right;
	}

	#delete-all:hover {
	background-color: #ddd;
	}