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 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 [email protected], 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