37m 29s – Intermediate
The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to work—enhancing your web projects with interactivity and multimedia. This installment shows you how to build features that allow visitors to your online store to filter their selections interactively via sliders, drag items onto wish lists, and automatically save them locally. Author Joseph Lowery uses this scenario as an opportunity to introduce concepts such as HTML5 form elements with JavaScript enhancements, local content storage, and drag-and-drop.
Topics include:
Including range form elements
Modifying the display interactively
Establishing JavaScript functions
Dragging items to wish lists
Storing wish list items locally
Saving and retrieving list items
Introduction – 3m 26s
Welcome – 54s
About the exercise files – 1m 11s
Course requirements – 1m 21s
1. Understanding the Project – 7m 14s
Examining what we’re going to build – 2m 41s
Exploring highlighted HTML5, CSS3, and JavaScript technologies – 4m 33s
2. Filtering with Sliders – 13m 8s
Including range form elements – 5m 3s
Modifying display interactively – 3m 34s
Establishing JavaScript functions – 4m 31s
3. Dragging Items to Compare – 7m 38s
Establishing drag-and-drop functionality – 1m 12s
Adding JavaScript events – 6m 26s
4. Storing Wish List Items Locally – 5m 45s
Saving list items – 3m 9s
Retrieving list items – 2m 36s
Conclusion – 18s
Next steps – 18s