HTML5 and JavaScript

Projects
Build on your Basic Knowledge of
HTML5 and JavaScript to Create
Substantial HTML5 Applications
Second Edition

Jeanine Meyer
HTML5 and JavaScript Projects
Jeanine Meyer
New York, USA

ISBN-13 (pbk): 978-1-4842-3863-9 ISBN-13 (electronic): 978-1-4842-3864-6

https://doi.org/10.1007/978-1-4842-3864-6
Library of Congress Control Number: 2018954635

Copyright © 2018 by Jeanine Meyer

This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Coordinating Editor: Nancy Chen
Cover designed by eStudioCalamar
Cover image designed by Mattia Serrani on Unsplash
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-
sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member
(owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a
Delaware corporation.
For information on translations, please e-mail rights@apress.com, or visit http://www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book's product page, located at www.apress.com/9781484238639. For more
detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
To my family, including my parents, who still take care of me
Table of Contents
About the Author ����������������������������������������������������������������������������������������������������� xi

About the Technical Reviewer ������������������������������������������������������������������������������� xiii

Acknowledgments ���������������������������������������������������������������������������������������������������xv

Introduction �����������������������������������������������������������������������������������������������������������xvii

Chapter 1: Building the HTML5 Logo: Drawing on Canvas with Scaling

and Semantic Tags ���������������������������������������������������������������������������������� 1
Introduction ................................................................................................................................... 1
Project History and Critical Requirements .................................................................................... 4
HTML5, CSS, and JavaScript features ........................................................................................... 6
Drawing Paths on Canvas ........................................................................................................ 6
Placing Text on Canvas and in the Body of a Document .......................................................... 9
Coordinate Transformations .................................................................................................. 10
Using the Range Input Element ............................................................................................. 12
Building the Application and Making It Your Own ....................................................................... 14
Testing and Uploading the Application ........................................................................................ 21
Summary..................................................................................................................................... 21

Chapter 2: Family Collage: Manipulating Programmer-Defined

Objects on a Canvas ������������������������������������������������������������������������������ 23
Introduction ................................................................................................................................. 23
Critical Requirements ................................................................................................................. 26
Autoplay Policy ...................................................................................................................... 26
HTML5, CSS, and JavaScript Features ........................................................................................ 27
JavaScript Objects ................................................................................................................. 27
User Interface ........................................................................................................................ 46

v
TABLE OF CONTENTS

Saving the Canvas to an Image ............................................................................................. 51

Building the Application and Making It Your Own ....................................................................... 52
Testing and Uploading the Application ........................................................................................ 77
Summary..................................................................................................................................... 77

Chapter 3: Bouncing Video: Animating and Masking HTML5 Video������������������������ 79

Introduction ................................................................................................................................. 79
Project History and Critical Requirements .................................................................................. 86
HTML5, CSS, and JavaScript Features ........................................................................................ 87
Definition of the Body and the Window Dimensions .............................................................. 87
Animation .............................................................................................................................. 89
Video Drawing Frames on Canvas or As a Movable Element................................................. 95
Traveling Mask ...................................................................................................................... 98
User Interface ...................................................................................................................... 101
Building the Application and Making It Your Own ..................................................................... 102
Making the Application Your Own ........................................................................................ 115
Testing and Uploading the Application ...................................................................................... 116
Summary................................................................................................................................... 117

Chapter 4: Map Maker: Combining Google Maps and the Canvas ����������������������� 119
Introduction ............................................................................................................................... 119
Latitude and Longitude and Other Critical Requirements ......................................................... 131
HTML5, CSS, and JavaScript Features ...................................................................................... 137
The Google Maps API ........................................................................................................... 137
Canvas Graphics .................................................................................................................. 140
Cursor .................................................................................................................................. 144
JavaScript Events ................................................................................................................ 145
Calculating Distance and Rounding Values for Display ....................................................... 150
Building the Application and Making It Your Own ..................................................................... 152
Testing and Uploading the Application ...................................................................................... 165
Summary................................................................................................................................... 165

vi
 TABLE OF CONTENTS

Chapter 5: Map Portal: Using Google Maps to Access Your Media ����������������������� 167
Introduction ............................................................................................................................... 167
Project History and Critical Requirements ................................................................................ 175
HTML5, CSS, and JavaScript Features ...................................................................................... 176
Google Maps API for Map Access and Event Handling ........................................................ 176
Project Content in External File ........................................................................................... 179
Distances and Tolerances .................................................................................................... 181
Regular Expressions Used to Create the HTML ................................................................... 182
Dynamic Creation of HTML5 Markup and Positioning ......................................................... 183
Hint Button........................................................................................................................... 186
Building the Application and Making It Your Own ..................................................................... 187
The Quiz Application ............................................................................................................ 187
Testing and Uploading the Application ...................................................................................... 201
Summary................................................................................................................................... 201

Chapter 6: Add to 15 Game ����������������������������������������������������������������������������������� 203

Introduction ............................................................................................................................... 203
General Requirements for a Game ............................................................................................ 205
HTML5, CSS, and JavaScript ..................................................................................................... 206
Styling in CSS ...................................................................................................................... 206
JavaScript Arrays................................................................................................................. 207
Setting Up the Game............................................................................................................ 209
Responding to a Player Move .............................................................................................. 209
Generating the Computer Move ........................................................................................... 210
Building the Application and Making It Your Own ..................................................................... 211
Testing and Uploading the Application ...................................................................................... 221
Summary................................................................................................................................... 221

vii
TABLE OF CONTENTS

Chapter 7: Origami Directions: Using Math-Based Line Drawings,

Photographs, and Videos �������������������������������������������������������������������� 223
Introduction ............................................................................................................................... 223
Critical Requirements ............................................................................................................... 233
HTML5, CSS, JavaScript Features, and Mathematics ............................................................... 234
Overall Mechanism for Steps .............................................................................................. 234
User Interface ...................................................................................................................... 238
Coordinate Values ................................................................................................................ 238
Utility Functions for Display ................................................................................................. 240
Utility Functions for Calculation........................................................................................... 243
Step Line Drawing Functions............................................................................................... 245
Displaying a Photograph...................................................................................................... 254
Presenting and Removing a Video ....................................................................................... 254
Building the Application and Making It Your Own ..................................................................... 255
Testing and Uploading the Application ...................................................................................... 288
Summary................................................................................................................................... 289

Chapter 8: Jigsaw Video ��������������������������������������������������������������������������������������� 291

Introduction ............................................................................................................................... 291
Background and Critical Requirements .................................................................................... 297
HTML5, CSS, JavaScript, and Programming Features............................................................... 297
Creating the Base Picture .................................................................................................... 298
Dynamically Created Elements ............................................................................................ 298
Setting Up the Game............................................................................................................ 300
Handling Player Actions ....................................................................................................... 301
Calculating If the Puzzle Is Complete .................................................................................. 304
Preparing, Positioning, and Playing the Video and Making It Hidden or Visible ................... 305
Building the Application and Making It Your Own ..................................................................... 306
Testing and Uploading the Application ...................................................................................... 318
Summary................................................................................................................................... 318

viii
 TABLE OF CONTENTS

Chapter 9: US States Game: Building a Multiactivity Game ���������������������������������� 321

Introduction ............................................................................................................................... 321
Critical Requirements ............................................................................................................... 332
HTML5, CSS, JavaScript Features, Programming Techniques, and Image Processing ............. 333
Acquiring the Image Files for the Pieces and Determining Offsets .................................... 333
Creating Elements Dynamically ........................................................................................... 341
User Interface Overall .......................................................................................................... 342
User Interface for Asking the Player to Click a State ........................................................... 343
User Interface for Asking the Player to Name a State ......................................................... 344
Spreading Out the Pieces .................................................................................................... 346
Setting Up the Jigsaw Puzzle .............................................................................................. 347
Saving and Recreating the State of the Jigsaw Game and Restoring the Original Map ...... 349
Building the Application and Making It Your Own ..................................................................... 353
Testing and Uploading the Application ...................................................................................... 374
Summary................................................................................................................................... 374

Chapter 10: Responsive Design and Accessibility ������������������������������������������������ 375

Introduction ............................................................................................................................... 375
Critical Requirements ............................................................................................................... 380
Screen Size and Dimension ................................................................................................. 381
Touch ................................................................................................................................... 381
Screen Reader and Tabs ...................................................................................................... 381
HTML, CSS, and JavaScript Features ........................................................................................ 382
Meta Tags ............................................................................................................................ 382
HTML and CSS Use of Percentages and Auto ...................................................................... 383
CSS @media ........................................................................................................................ 384
The HTML alt Attribute and Semantic Elements .................................................................. 384
HTML tabIndex..................................................................................................................... 385
JavaScript Use of Width and Height Properties ................................................................... 385
Creating Elements Dynamically ........................................................................................... 386
Choosing From List .............................................................................................................. 387
Mouse Events, Touch Events, and Key Events ..................................................................... 388

ix
TABLE OF CONTENTS

Building the Reveal Application and Making It Your Own.......................................................... 390

Testing and Uploading the Reveal Application..................................................................... 404
Building the Countries/Capitals Quiz and Making It Your Own ............................................ 404
Testing and Uploading the Countries/Capitals Quiz Application ................................................ 414
Testing and Uploading the Jigsaw Turning to Video Application ............................................... 414
Summary................................................................................................................................... 415

Index ��������������������������������������������������������������������������������������������������������������������� 417

x
About the Author
Jeanine Meyer is a full professor at Purchase College/State
University of New York. She teaches courses to students
majoring in mathematics/computer science and also enjoys
the frequent presence of others in her classes, including new
media, music, dance, economics, and chemistry majors. She
developed and teaches courses satisfying the mathematics
general education requirement, including one on math in
the news and one on origami. The website for her academic
activities is http://faculty.purchase.edu/jeanine.meyer.
Before coming to academia, she was a research staff member and manager at IBM
Research, focusing on robotics and manufacturing research, and she later worked on the
corporate manufacturing staff and as a research consultant at IBM for educational grant
programs.
She has enjoyed working with Apress, including updating the HTML5 books. She
continues with the practice of building programming examples using media featuring
her family and her activities and hopes that inspires readers to create work on topics that
are important to them. Her hobbies and interests include studying Spanish and piano,
playing computer games, doing origami, and volunteering for progressive candidates
and causes. She enjoys her daughter Aviva’s cooking while doing some baking herself
and looks forward to travel this year.

xi
About the Technical Reviewer
Takashi Mukoda is an international student at Purchase
College/State University of New York. He is currently taking
a semester off and back home in Japan. At Purchase College,
he majors in Mathematics/Computer Science and New
Media and has worked as a teaching assistant for computing
and mathematics courses.
Takashi likes playing the keyboard and going on hikes in
the mountains to take pictures. His interest in programming
and art motivates him to create multimedia art pieces. Some
of them are built with Processing and interact with human
motion and sounds.
(See his website at http://www.takashimukoda.com.)

xiii
Acknowledgments
Much appreciation to my students and colleagues at Purchase College/State University
of New York. In particular, for Chapter 5, which covers the map portal quiz, I want to
thank Jennifer Douglas, Jeremy Martinez, and Nik Dedvukaj, for the maze video clip
produced in my Robotics class in 2008, which I retained for the new edition. I want also
to thank Takashi Mukoda for his photograph of the Great Torii, in addition to everything
else he has contributed to this and other projects. I re-used an audio recording of my
mother playing piano. Thanks to all my family members (Aviva Meyer, Daniel Meyer,
Annika Meyer, Anne Kellerman, Palmer Agnew, Debbie Torres, and Joshua Torres) for
being the subjects of photographs and videos and for making the photos, video, and
audio. Thanks to Daniel Davis for his HTML5 logo and his technical assistance with the
first edition.
Thanks to the crew at Apress, including Nancy Chen, James Markham, and the
technical reviewer Takashi Mukoda, as well as others I do not know by name.

xv
Introduction
This book continues my exploration of HTML5. My approach in developing the projects
was to combine features such as canvas and video, attempt more intricate drawing by
using mathematics, and use standard programming techniques such as object-oriented
programming and separation of content and logic. I was also interested in building
applications combining HTML5 and JavaScript with other technologies, including
Google Maps.
Each chapter in the book is focused on an application or set of related applications.
This is because my experience as a teacher and a learner has shown that concepts
and mechanics are best understood in the context of actual use. The applications start
off with drawing the HTML5 official logo. As you will find out in Chapter 1, the way I
developed this application prompted use of coordinate transformations.
The project in Chapter 2, involving a family collage, was inspired by my growing
family and the desire to teach about object-oriented programming. It is a good
application for you to use as a foundation to create your own, with your own photos
and objects of your own invention. Chapter 3, which shows how to create a bouncing
video, was built on other two-dimensional applications I have created, and features two
different ways to combine canvas and video.
Chapters 4 and 5 demonstrate use of the Google Maps API (Application
Programming Interface), a powerful facility that allows you to incorporate access
to Google Maps as part of your own projects. Chapter 4 presents a user interface
combining map and canvas and includes a custom-designed cursor and the use of alpha
(transparency) in drawing paths. The map quiz in Chapter 5 demonstrates the use of
mapping as a portal to media. The application shows you how to separate content and
logic so you can scale up to various applications (e.g., a tour of a region or a geography
quiz with many locations).
Chapter 6 features a game called Add to 15, which turned out to be an excellent
example of arrays. It also demonstrated the necessity to prepare for bad behavior on the
part of players.

xvii
INTRODUCTION

In Chapter 7, I use the task of producing directions for origami to show how
to combine line drawings, often using mathematical expressions, and video and
photographs. You can use this as a model for your own set of directions for a task in
which drawings, video, or images would be most appropriate. Or you can let the reading
refresh your memory for topics in algebra and geometry. Chapter 8 features a jigsaw
puzzle that is transformed into a video when it’s completed. Chapter 9 is an educational
game with questions on the states of the USA, and it includes the challenge of a jigsaw
puzzle. The jigsaw puzzle includes the feature of saving the puzzle-in-progress using
localStorage.
For Chapter 10, I decided to address challenges of responsive design and
accessibility as being more appropriate for an HTML and JavaScript book than what I
had before. My examples demonstrate ways to incorporate touch in addition to mouse
actions, to respond to different screen dimensions, and to specify tab order to ease the
use of screen readers.

Who Is This Book For?

I do believe my explanations are complete, but I am not claiming, as I did for my
previous book, The Essential Guide to HTML5, that this book is for the total beginner.
This book is for the developer who has some knowledge of programming and who
wants to build (more) substantial applications by combining features of JavaScript and
going beyond the basics. It also can serve as an idea book for someone working with
programmers to get an understanding of what is possible.

How Is This Book Structured?

This book consists of 10 chapters, each organized around an application or type of
application. You can skip around, though there are cross-references between chapters,
indicated in the text. Each chapter starts with an introduction to the application,
with screenshots of the applications in use. The chapters continue with a discussion
of the critical requirements in which concepts are introduced before diving into the
technical details. The next sections describe how the requirements are satisfied, with
specific constructs in HTML5, JavaScript, and CSS. I then show the application coding
line by line with comments. You can decide how to read these tables. You may decide

xviii
 INTRODUCTION

to use them as a reference when writing your own programs. Each chapter ends
with instructions and tips for testing and uploading the application to a server, and a
summary of what you learned.
The code is included as downloads available from the publisher. Go to
https://github.com/Apress/html-js-projs. In addition, the figures are available as
full-color TIFF files. Of course, you will want to use your own media for the projects. My
media (video, audio, and images) is included with the code and this includes images for
the 50 states for the states game in Chapter 9. You can use the project as a model for a
different part of the world or a puzzle based on an image or diagram. There are extras:
a program for an origami frog included with the code in Chapter 7 and a version of the
jigsaw turning into a video from Chapter 8 adapted for use on devices requiring touch is
included with the source code for Chapter 10.
Let’s get started.

xix