HTML5 Web Application Development By Example

Chapter 1: The Task at Hand 7
The components of an HTML5 application 8
Time for action – creating the HTML file 10
Time for action – creating the CSS file 12
Time for action – creating the JavaScript file 13
The dollar sign identifier 16
Creating our first application 17
Time for action – creating a tasklist 18
Time for action – removing a task from the list 22
Time for action – moving tasks within the list 22
HTML templates 23
Time for action – implementing a template 23
Time for action – editing a task in the list 26
Saving the state of the application 28
Time for action – creating a localStorage wrapper 30
Time for action – storing the tasklist 33
Time for action – loading the tasklist 35
Summary 37
Chapter 2: Let's Get Stylish 39
CSS3 overview 40
CSS3 colors 40
Rounded corners 41
Shadows 42
Box shadows 43
Text shadows 44

Time for action – styles in action 44
Backgrounds 46
Linear gradients 47
Radial gradients 48
Background images 48
CSS sprites 49
Time for action – adding a gradient and button images 51
Transitions 53
Transforms 54
Time for action – effects in action 55
Dynamic stylesheets 58
Time for action – adding a theme selector 58
Filling the window 61
Time for action – expanding the application 61
Summary 63
Chapter 3: The Devil is in the Details 65
HTML5 input types 66
Color 66
Date 66
Email 67
Number 67
Range 68
Time 68
URL 68
Datalist 68
Autofocus 69
Task details 69
Time for action – adding task details 69
Time for action – hiding task details 72
Custom data attributes 75
Data binding with custom attributes 76
Time for action – building a data model 76
Time for action – implementing the bindings 80
Time for action – loading the task list 83
Queuing up changes 84
Time for action – delaying the saves 84
Summary 86