HTML5 Web Application Development By Example Beginner's guide

Time for action – adding a theme selector

To start with, we need a place to put the theme selector. So let's add a toolbar to the task list application's markup in taskAtHand.html. We will insert it between the <header> and <div id="main"> elements. The toolbar will contain a <label> and a <select> drop-down list. The list will contain four different color themes: blue, green, magenta, and red. You can find the code for this section in chapter2/example2.3:

<div id="app">
  <header>Task@Hand</header>
  <div id="toolbar">
    <label for="theme">Theme</label>
    <select id="theme" title="Select theme">
      <option value="blue">Blue</option>
      <option value="green">Green</option>

      <option value="magenta">Magenta</option>
      <option value="red">Red</option>
 </select> ...