HTML and CSS Reference
In-Depth Information
Here is the complete code including the database support
detection and the click handler code for the radio buttons:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=utf-8 />
<title>HTML5 tweet time range</title>
<style>
body { font-family: helvetica, arial;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Select a time range of recent HTML5 tweets</
¬ legend>
<input type=”radio” value=”5” id=”t5m” name=”timerange”
¬ /><label for=”t5m”>5 minutes</label>
<input type=”radio” value=”30” id=”t30m” name=
¬ ”timerange” /><label for=”t30m”>30 minutes</label>
<input type=”radio” value=”120” id=”t2h” name=
¬ ”timerange” /><label for=”t2h”>2 hours</label>
<input type=”radio” value=”all” id=”tall” name=
¬ ”timerange” checked=”checked” /><label for=”tall”>
¬ all time</label>
</fieldset>
</form>
<ul id=”tweets”></ul>
<script>
var tweetEl = document.getElementById('tweets');
var db;
function setupDatabase() {
if (!window.openDatabase) {
tweetEl.innerHTML = '<li>Web SQL Database API is not
¬ available in this browser, please try nightly Opera,
¬ Webkit or Chrome.</li>';
return;
}
db = openDatabase('tweets', '1.0', 'db of tweets',
¬ 2 * 1024 * 1024);
