O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required