Skip to content

Instantly share code, notes, and snippets.

@Sfshaza
Last active October 2, 2019 01:41
Show Gist options
  • Save Sfshaza/582b9a8d36786566ba08 to your computer and use it in GitHub Desktop.
Save Sfshaza/582b9a8d36786566ba08 to your computer and use it in GitHub Desktop.
todo_with_delete
<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment