To start, we need to code up the interface.
html5_indexedDB/index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>AwesomeNotes</title>
<linkrel="stylesheet"href="stylesheets/style.css">
<scriptsrc="javascripts/IndexedDBShim.min.js"></script>
</head>
<body>
<divid="container">
<sectionid="sidebar">
<inputtype="button"id="new_button"value="Newnote">
<inputtype="button"id="delete_all_button"value="Deleteall">
<ularia-live="polite"id="notes">
</ul>
</section>
<sectionid="main"aria-live="polite">
<form>
<ol>
<li>
<labelfor="title">Title</label>
<inputtype="text"id="title">
</li>
<li>
<labelfor="note">Note</label>
<textareaid="note"></textarea>
</li>
<li>
<inputtype="submit" id="save_button"value="Save">
<inputtype="submit" id="delete_button"value="Delete">
</li>
</ol>
</form>
</section>
</div>
</body>
</html>We define the sidebar and main regions using <section> tags, and we give IDs
to each of the important user-interface controls, like the Save button. This
will make it easier for us to locate elements so that we can attach event
listeners.We’ll also need a style sheet so that we can make this look more like the figure.
style.css looks like this:report erratum • discussStoring Data in a Client-Side Database Using IndexedDB • 191
Download from Wow! eBook <www.wowebook.com>