diegobfernandez/app.css

## app.css
body {
  color: #222;
  font: 14px Arial;
}

body a {
  color: #3D5C9D;
  text-decoration: none;
}

## app.js
// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)


// Cria namespace para isolar variaveis do escopo global
var todoApp = {}
todoApp.Storage = {};
todoApp.Storage.db = null;

todoApp.Storage.onerror = function (e) {
    console.log(e);
};

todoApp.Storage.open = function () {
    var request = indexedDB.open("todos", 1);

    request.onsuccess = function (e) {
        todoApp.Storage.db = request.result;
        todoApp.Storage.getAllTodoItems();
    };
    request.onupgradeneeded = function (e) {
        var db = e.target.result;
        if (db.objectStoreNames.contains("todo")) {
            db.deleteObjectStore("todo");
        }

        var store = db.createObjectStore("todo", { keyPath: "timeStamp" });
    };
    request.onerror = todoApp.Storage.onerror;
};

todoApp.Storage.addTodo = function (todoText) {
    var db = todoApp.Storage.db;
    var trans = db.transaction(["todo"], "readwrite");
    var store = trans.objectStore("todo");

    var data = {
        "text": todoText,
        "timeStamp": new Date().getTime()
    };

    var request = store.put(data);

    request.onsuccess = function (e) {
        todoApp.Storage.getAllTodoItems();
    };

    request.onerror = function (e) {
        console.log("Error Adding: ", e);
    };
};

todoApp.Storage.deleteTodo = function (id) {
    var db = todoApp.Storage.db;
    var trans = db.transaction(["todo"], "readwrite");
    var store = trans.objectStore("todo");

    var request = store.delete(id);

    request.onsuccess = function (e) {
        todoApp.Storage.getAllTodoItems();
    };

    request.onerror = function (e) {
        console.log("Error Adding: ", e);
    };
};

todoApp.Storage.getAllTodoItems = function () {
    var todos = document.getElementById("todoItems");
    todos.innerHTML = "";

    var db = todoApp.Storage.db;
    var trans = db.transaction(["todo"], "readwrite");
    var store = trans.objectStore("todo");

    // Get everything in the store;
    var cursorRequest = store.openCursor();

    cursorRequest.onsuccess = function (e) {
        var result = e.target.result;
        if (!!result == false)
            return;

        renderTodo(result.value);
        result.continue();
    };

    cursorRequest.onerror = todoApp.Storage.onerror;
};

function renderTodo(row) {
    var todos = document.getElementById("todoItems");
    var li = document.createElement("li");
    var a = document.createElement("a");
    var t = document.createTextNode(row.text);

    a.addEventListener("click", function () {
        todoApp.Storage.deleteTodo(row.timeStamp);
    }, false);

    a.textContent = " [Delete]";
    li.appendChild(t);
    li.appendChild(a);
    todos.appendChild(li);
}

function addTodo() {
    var todo = document.getElementById("todo");
    todoApp.Storage.addTodo(todo.value);
    todo.value = "";
}

function init() {
    todoApp.Storage.open();
}

//indexedDB.deleteDatabase("todos", 2);
window.addEventListener("DOMContentLoaded", init, false);

## index.html
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf8" />
    <link rel="stylesheet" type="text/css" href="app.css" />
  </head>
  <body>
    <ul id="todoItems"></ul>
    <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
    <input type="submit" value="Add Todo Item" onclick="addTodo(); return false;"/>
	<script type="text/javascript" src="app.js"></script>
  </body>
</html>
	body {
	color: #222;
	font: 14px Arial;
	}

	body a {
	color: #3D5C9D;
	text-decoration: none;
	}
	// In the following line, you should include the prefixes of implementations you want to test.
	window.indexedDB = window.indexedDB \|\| window.mozIndexedDB \|\| window.webkitIndexedDB \|\| window.msIndexedDB;
	// DON'T use "var indexedDB = ..." if you're not in a function.
	// Moreover, you may need references to some window.IDB* objects:
	window.IDBTransaction = window.IDBTransaction \|\| window.webkitIDBTransaction \|\| window.msIDBTransaction;
	window.IDBKeyRange = window.IDBKeyRange \|\| window.webkitIDBKeyRange \|\| window.msIDBKeyRange
	// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)


	// Cria namespace para isolar variaveis do escopo global
	var todoApp = {}
	todoApp.Storage = {};
	todoApp.Storage.db = null;

	todoApp.Storage.onerror = function (e) {
	console.log(e);
	};

	todoApp.Storage.open = function () {
	var request = indexedDB.open("todos", 1);

	request.onsuccess = function (e) {
	todoApp.Storage.db = request.result;
	todoApp.Storage.getAllTodoItems();
	};
	request.onupgradeneeded = function (e) {
	var db = e.target.result;
	if (db.objectStoreNames.contains("todo")) {
	db.deleteObjectStore("todo");
	}

	var store = db.createObjectStore("todo", { keyPath: "timeStamp" });
	};
	request.onerror = todoApp.Storage.onerror;
	};

	todoApp.Storage.addTodo = function (todoText) {
	var db = todoApp.Storage.db;
	var trans = db.transaction(["todo"], "readwrite");
	var store = trans.objectStore("todo");

	var data = {
	"text": todoText,
	"timeStamp": new Date().getTime()
	};

	var request = store.put(data);

	request.onsuccess = function (e) {
	todoApp.Storage.getAllTodoItems();
	};

	request.onerror = function (e) {
	console.log("Error Adding: ", e);
	};
	};

	todoApp.Storage.deleteTodo = function (id) {
	var db = todoApp.Storage.db;
	var trans = db.transaction(["todo"], "readwrite");
	var store = trans.objectStore("todo");

	var request = store.delete(id);

	request.onsuccess = function (e) {
	todoApp.Storage.getAllTodoItems();
	};

	request.onerror = function (e) {
	console.log("Error Adding: ", e);
	};
	};

	todoApp.Storage.getAllTodoItems = function () {
	var todos = document.getElementById("todoItems");
	todos.innerHTML = "";

	var db = todoApp.Storage.db;
	var trans = db.transaction(["todo"], "readwrite");
	var store = trans.objectStore("todo");

	// Get everything in the store;
	var cursorRequest = store.openCursor();

	cursorRequest.onsuccess = function (e) {
	var result = e.target.result;
	if (!!result == false)
	return;

	renderTodo(result.value);
	result.continue();
	};

	cursorRequest.onerror = todoApp.Storage.onerror;
	};

	function renderTodo(row) {
	var todos = document.getElementById("todoItems");
	var li = document.createElement("li");
	var a = document.createElement("a");
	var t = document.createTextNode(row.text);

	a.addEventListener("click", function () {
	todoApp.Storage.deleteTodo(row.timeStamp);
	}, false);

	a.textContent = " [Delete]";
	li.appendChild(t);
	li.appendChild(a);
	todos.appendChild(li);
	}

	function addTodo() {
	var todo = document.getElementById("todo");
	todoApp.Storage.addTodo(todo.value);
	todo.value = "";
	}

	function init() {
	todoApp.Storage.open();
	}

	//indexedDB.deleteDatabase("todos", 2);
	window.addEventListener("DOMContentLoaded", init, false);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf8" />
	<link rel="stylesheet" type="text/css" href="app.css" />
	</head>
	<body>
	<ul id="todoItems"></ul>
	<input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
	<input type="submit" value="Add Todo Item" onclick="addTodo(); return false;"/>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>