Web Programming with html5, css, and JavaScript

627
Exercises

---

Project
Create a web page that displays a combination lock with 40 tick marks and number labels for 
every fifth number 0, 5, 10, . . ., 35. Provide “Nudge left” and “Nudge right” buttons that cause the 
combination lock’s dial to turn one position left (counterclockwise) or one position right (clock-
wise), respectively. For details, study the sample session.
You must use an external JavaScript file. Name your files 
combinationLock.html
 and 
combinationLock.js
.
As always, you are required to use named constants and helper functions when appropriate.
Sample Session
After loading the web page:
Extra credit
628
Chapter 12
 
Canvas

---

After clicking 
Nudge left
:
After clicking 
Nudge right
3 times:
629
Project

---

extra Credit
Implement a target number box that allows the user to enter a number between 0 and 39. Imple-
ment two buttons that, when clicked, cause the dial to turn left or right to the user-entered target 
value. When the dial turns, the turning motion must be smooth; it must not jump more than one 
tick at a time.
To implement the turning motion, you’ll need to use the 
setTimeout
method. See the Inter-
net for 
setTimeout
details.
Sample Session
After refreshing the web page, click 
Nudge right
10 times, so the 30 is at the top:
630
Chapter 12
 
Canvas

---

After entering 35 in the target box, and clicking 
Left to target
, the dial turns 5 positions 
counterclockwise:
After entering 5 in the target box, and clicking 
Right to target
, the dial turns 30 positions 
clockwise:
631
Project

---

---

© StationaryTraveller/Getty Images
This appendix describes HTML5 and CSS3 coding-style conventions. Most of these guidelines 
are widely accepted, but alternative guidelines do exist in certain areas. One way we ensure that 
our guidelines are followed is by going along with the 500-pound gorilla that is Google. For the 
most part, we match Google’s HTML/CSS Style Guide document at:
https://google.github.io/styleguide/htmlcssguide.html
We attempt to present HTML coding practices that conform to the spirit of the HTML5 
standard. For an overview and a short conceptual discussion of such practices, see the “Note for 
teachers” section in the W3C’s Doctypes and Markup Styles web page at:
http://www.w3.org/community/webed/wiki/Doctypes_and_markup_styles#A_note_for_teachers
This appendix addresses only HTML coding-style issues. It does not address user-interface 
design issues such as layout, color aesthetics, navigability, content, and accessibility.
Jump ahead to the end of this appendix and note the sample HTML file and its associated 
external CSS file. You’ll probably want to refer to those files while reading the upcoming 
coding-style conventions guidelines.