application.js

(function() {
	var db, input, ul;

	databaseOpen()
		.then(function() {
			input = document.getElementsByTagName('input')[0];
			ul = document.getElementsByTagName('ul')[0];
			document.body.addEventListener('submit', onSubmit);
			document.body.addEventListener('click', onClick);
		})
		.then(refreshView);

	function onClick(e) {
		e.preventDefault();
		if (e.target.hasAttribute('id')) {
			databaseTodosGetById(e.target.getAttribute('id'))
				.then(function(todo) {
					todo.deleted = true;
					return databaseTodosPut(todo);
				})
				.then(refreshView);
		}
	}

	function onSubmit(e) {
		e.preventDefault();
		var todo = { text: input.value, _id: String(Date.now()) };
		databaseTodosPut(todo)
			.then(function() {
				input.value = '';
			})
			.then(refreshView);
	}

	function refreshView() {
		return databaseTodosGet({ deleted: false }).then(renderAllTodos);
	}

	function renderAllTodos(todos) {
		var html = '';
		todos.forEach(function(todo) {
			html += todoToHtml(todo);
		});
		ul.innerHTML = html;
	}

	function todoToHtml(todo) {
		return '<li><button id="'+todo._id+'">delete</button>'+todo.text+'</li>';
	}

	function databaseOpen() {
		return new Promise(function(resolve, reject) {
			var version = 1;
			var request = indexedDB.open('todos', version);
			request.onupgradeneeded = function(e) {
				db = e.target.result;
				e.target.transaction.onerror = reject;
				db.createObjectStore('todo', { keyPath: '_id' });
			};
			request.onsuccess = function(e) {
				db = e.target.result;
				resolve();
			};
			request.onerror = reject;
		});
	}

	function databaseTodosPut(todo) {
		return new Promise(function(resolve, reject) {
			var transaction = db.transaction(['todo'], 'readwrite');
			var store = transaction.objectStore('todo');
			var request = store.put(todo);
			transaction.oncomplete = resolve;
			request.onerror = reject;
		});
	}

	function databaseTodosGet(query) {
		return new Promise(function(resolve, reject) {
			var transaction = db.transaction(['todo'], 'readonly');
			var store = transaction.objectStore('todo');

			// Get everything in the store
			var keyRange = IDBKeyRange.lowerBound(0);
			var cursorRequest = store.openCursor(keyRange);

			// This fires once per row in the store, so for simplicity collect the data
			// in an array (data) and send it pass it in the resolve call in one go
			var data = [];
			cursorRequest.onsuccess = function(e) {
				var result = e.target.result;

				// If there's data, add it to array
				if (result) {
					if (!query || (query.deleted === true && result.value.deleted) || (query.deleted === false && !result.value.deleted)) {
						data.push(result.value);
					}
					result.continue();

				// Reach the end of the data
				} else {
					resolve(data);
				}
			};
		});
	}

	function databaseTodosGetById(id) {
		return new Promise(function(resolve, reject) {
			var transaction = db.transaction(['todo'], 'readonly');
			var store = transaction.objectStore('todo');
			var request = store.get(id);
			request.onsuccess = function(e) {
				var result = e.target.result;
				resolve(result);
			};
			request.onerror = reject;
		});
	}

	function databaseTodosDelete(todo) {
		return new Promise(function(resolve, reject) {
			var transaction = db.transaction(['todo'], 'readwrite');
			var store = transaction.objectStore('todo');
			var request = store.delete(todo._id);
			transaction.oncomplete = resolve;
			request.onerror = reject;
		});
	}

}());