Javascript

<script type="text/javascript" charset="utf-8">
	//*********************************************************    
    // Storage Capabilities
    //*********************************************************
    function getStorageReady() {
		function errorCreateTable(error) {
			alert("ERROR: Cannot create demo table.")
		} 
		
		function createTable(tx) {
			tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (name, type, urgency, due)');
		}
		
    	var db = window.openDatabase(dbName, dbVersion, dbDisplayName, dbSize);
    	db.transaction(createTable, errorCreateTable, null);
	}
    
    function resetStorage() {
    	function errorResetTable(error) {
    		alert("ERROR: Cannot reset table. Code: " + error.code);
    	}
    	function successResetTable() {
    		alert("SUCCESS: Demo table is reset.");
    	}
    	
    	function resetTable(tx) {
    		tx.executeSql('DROP TABLE IF EXISTS DEMO');
			tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (name, type, urgency, due)');
    	}
    	
    	var db = window.openDatabase(dbName, dbVersion, dbDisplayName, dbSize);
    	db.transaction(resetTable, errorResetTable, successResetTable);
    }
    
    function updateInsertStatus(status) {
		$("#storageInsertStatus").empty();
		$("#storageInsertStatus").append(status).trigger("create");
    }
    
    function prepareInsertStorage() {
    	updateInsertStatus("");
    	
		$("#taskName").val('');
		$("select#taskType")[0].selectedIndex = 0;
		$("select#taskType").selectmenu("refresh");
		
		$("select#taskUrgency").val("no").slider("refresh");
		
		$("select#taskDueIn")[0].selectedIndex = 0;
		$("select#taskDueIn").selectmenu("refresh");
    }
    
    function insertStorage() {
    	function successInsertCB() {   		
    		var taskname = $("#taskName").val();
    		
    		prepareInsertStorage();    
    		updateInsertStatus("\"" + taskname + "\" added");    				
    	}
    	
    	function errorInsertCB(tx,err) {
    		prepareInsertStorage();
    		updateInsertStatus("ERROR: Cannot insert into table. Code: " + err);
    	}
    	   	
    	function populateDB(tx) {
    		var rowVal  = '"' + $("#taskName").val()    + '",';
    		    rowVal += '"' + $("select#taskType    option:selected").val() + '",';
    		    rowVal += '"' + $("select#taskUrgency option:selected").val() + '",';
    		    rowVal += '"' + $("select#taskDueIn   option:selected").val() + '"';
    		    		
			tx.executeSql('INSERT INTO DEMO (name, type, urgency, due) VALUES (' + rowVal + ')');
    	}
    	
    	var db = window.openDatabase(dbName, dbVersion, dbDisplayName, dbSize);
    	db.transaction(populateDB, errorInsertCB, successInsertCB);    	
    }
    function selectStorage() {
		$("#selectStorageProperties").empty();
		$("#selectStorageStatus").empty();
		
		function querySuccess(tx, results) {
			$("#selectStorageStatus").append("Total rows: " + results.rows.length + "<br/>");

			var	rowRS  = "<div class='ui-block-a'>" + boldLabel("Name")    + "</div>";
				rowRS += "<div class='ui-block-b'>" + boldLabel("Type")    + "</div>";
				rowRS += "<div class='ui-block-c'>" + boldLabel("Urgency") + "</div>";
				rowRS += "<div class='ui-block-d'>" + boldLabel("Due in")  + "</div>";
				$("#selectStorageProperties").append(rowRS).trigger("create");
					
			if (results.rows.length > 0) {
				for (var i=0; i<results.rows.length; i++) {
						rowRS  = "<div class='ui-block-a'>" + results.rows.item(i).name    + "</div>";
					    rowRS += "<div class='ui-block-b'>" + results.rows.item(i).type    + "</div>";
					    rowRS += "<div class='ui-block-c'>" + results.rows.item(i).urgency + "</div>";
					    rowRS += "<div class='ui-block-d'>" + results.rows.item(i).due     + "</div>";
					$("#selectStorageProperties").append(rowRS).trigger("create");
				}
			}
			else {
				$("#selectStorageProperties").append("No data found.").trigger("create");
			}
		}

    	function errorCB(tx,err) {
    		$("#selectStorageStatus").append("ERROR: Cannot select from table. Code: " + err);
    	}
    	
    	function queryDB(tx) {
			tx.executeSql('SELECT * FROM DEMO;', [], querySuccess, errorCB);
    	}
    	
    	var db = window.openDatabase(dbName, dbVersion, dbDisplayName, dbSize);    	
    	db.transaction(queryDB, errorCB);
    }   
</script>

HTML 5/JQuery Mobile

	<!---------------------------------- Main Page --------------------------------------->
	<div data-role="page" id="main">
		<div data-role="header" data-position="fixed">
			<h1 id="appTitle"></h1>
		</div>
		<div data-role="content">	
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="#storageCap" data-transition="slide" onclick="getStorageReady();">Storage</a></li>
		</ul>
		</div>
	</div>
	
	<!---------------------------------- Storage ----------------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="storageCap">
		<div data-role="header">
			<h1>Storage</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true">
				<li><a href="#" onclick="resetStorage();">Reset Table</a></li>
				<li><a href="#storageInsert" onclick="prepareInsertStorage();">Insert Row</a></li>
				<li><a href="#storageSelect" onclick="selectStorage();">Select Table</a></li>
			</ul>
			<div class="mesgBox">
				<h5 class="hlabel">Database implementation using sqlite</h5>
				<ul class="smFont">
					<li>Reset Table  - Remove all data in the table</li>
					<li>Insert Row   - Insert data to the table</li>
					<li>Select Table - Show data in the table</li>
				</ul>			
			</div>				
		</div>
	</div>

	<!---------------------------------- Storage: select --------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="storageSelect">
		<div data-role="header">
			<h1>Storage - Select All Records</h1>
		</div>
		<div data-role="content" class="ui-body ui-body-c">
			<div id="selectStorageProperties" class="ui-grid-c"></div>
		</div>
		<div data-role="footer" id="selectStorageStatus">
		</div>
	</div>	

	<!---------------------------------- Storage: insert --------------------------------->
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="storageInsert">
		<div data-role="header">
			<h1>Storage - Insert Record</h1>
		</div>
		<div data-role="content" class="ui-body ui-body-c">
			<div data-role="fieldcontain">
				<form>
					<label for="taskName">Task Name:</label>
					<input name="taskName" id="taskName" type="text" placeholder="Task Name"/>
	
					<label for="taskType">Task Type:</label>
					<select name="taskType" id="taskType">
						<option value="home" selected="selected">Home</option>
						<option value="work">Work</option>
						<option value="misc">Misc</option>
					</select>
	
					<label for="taskUrgency">Urgent:</label>
					<select name="taskUrgency" id="taskUrgency" data-role="slider">
						<option value="no" selected="selected">No</option>
						<option value="yes">Yes</option>
					</select>
					
					<label for="taskDueIn">Due In:</label>
					<select name="taskDueIn" id="taskDueIn">
						<option value="1 day" selected="selected">1 day</option>
						<option value="2 day">2 day</option>
						<option value="3 day">3 day</option>
					</select>
				</form>	
			</div>	
			
			<button id="addTask" onclick="insertStorage();">Add Task</button>		
		</div>
		
		<div data-role="footer" id="storageInsertStatus">	
		</div>
	</div>