Making a todo list with Dart

Since this has become the "Hello World" for web programmers, let's make a simple todo list and start a new web application todo_v1. To record our tasks we need an input field corresponding with InputElement in Dart:

<input id="task" type="text" placeholder="What do you want to do?"/>

The HTML5 placeholder attribute lets you specify default text that appears in the field.

We specify a list tag (UListElement) that we will fill up in our code:

<ul id="list"/>

The following is the code from todo_v1.dart:

import 'dart:html';

InputElement task;
UListElement list;

main() {
  task = querySelector('#task');                        (1)
  list = querySelector('#list');                        (2)
  task.onChange.listen( (e) => addItem() );             (3)
}

void addItem() {
  var newTask = new LIElement();                       (4)
  newTask.text = task.value;                           (5)
  task.value = '';                                     (6)
  list.children.add(newTask);                          (7)
}

We bind our HTML elements to the Dart objects task and list in lines (1) and (2). In line (3) we attach an event-handler addItem to the onChange event of the textfield task: this fires when the user enters something in the field and then leaves it (either by pressing Tab or Enter). UListElement is in fact a collection of LIElements (these are its children); so for each new task we make a LIElement (4), assign the task's value to it (5), clear the input field (6), and add the new LIElement to the list in (7). In the following screenshot you can see some tasks to be performed:

A simple todo list

Of course this version isn't very useful (unless you want to make a print of your screen); our tasks aren't recorded and we can't indicate which tasks are finished. Don't worry; we will enhance this app in the future versions.