Skip to content

Instantly share code, notes, and snippets.

@smolck
Forked from Sfshaza/index.html
Last active October 2, 2019 20:43
Show Gist options
  • Save smolck/46cdc15290ede948ea9e310d773cd95f to your computer and use it in GitHub Desktop.
Save smolck/46cdc15290ede948ea9e310d773cd95f to your computer and use it in GitHub Desktop.
todo
<!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>Procrastinator's 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>
</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);
}
void addToDoItem(Event e) {
var newToDo = new LIElement();
newToDo.text = toDoInput.value;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment