For my Semantic app I decided to make a simple todo list application. It's all browser-based, meaning there's no communication with a server. It make use of a couple of HTML5 JavaScript APIs, including LocalStorage and FileReader.

Try it out here: todo.decnorton.com

The backbone of the app was written in JavaScript, making using of the JavaScript prototype object to consolidate my methods. It's also supplemented by jQuery.

I started out with a fresh copy of the HTML5 Boilerplate and stripped out the bits I didn't want or need.

A form at the top of the page lets you add new tasks. I'd originally intended to include a date option, but found the native date input a bit ugly and I didn't want to delve into creating my own or using a jQuery plugin. When a new task is added, it's put into an object that holds a unique id (using the uniqid function from php.js), the content, date (currently unused), timestamp (when it was created) and a boolean indicating whether it's been done or not.

var obj = {
	id : uniqid(),
	content: thing.val(),
	date: date.val(),
	timestamp: time(),
	done : false
}
todo.newTask(obj);

The new task is added to the task list and then added to the main app object (todo.data). The LocalStorage is updated with the new todo.data but LocalStorage doesn't natively support the storage of Objects so I had to extend the API to convert Objects to strings and store them.

Storage.prototype.setObject = function(key, value) {
	this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
	var value = this.getItem(key);
	return value && JSON.parse(value);
}

Once the task is in the list, you have a few options. You can mark the task as done, you can edit the task content or you can delete the task.

Double clicking on the task adds a contenteditable tag to the content span and adds an onblur listener to it. When it's blurred the updateTask method is called and the data object updated.

You also have the ability to import and export the data as XML. Clicking the import button will bring up a modal dialog with the option to either paste in the XML or choose a file. Choosing a file will read the file using the JS FileReader API and load it into a string and import the data into the app. Similarly exporting the data will offer you the option to copy the text or download an XML file.

I used a CSS pre-processor called SASS to write the CSS. It adds a number of useful features that aren't native to CSS3, including variables, nesting, functions, and more.

todo.decnorton.com
You can find the code on github: github.com/decnorton/todo