HTML and CSS Reference
In-Depth Information
setting of 'letters' , and the secret word letter div elements have a setting of 'blanks' . The style
section contains the following two styles:
<style>
.letters {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double;
margin: 5px; padding: 5px; color:#F00; background-color:#0FC; font-family:"Courier
New", Courier, monospace;
}
.blanks {position:absolute;left: 0px; top: 0px; border:none; margin: 5px; padding:
5px; color:#006; background-color:white; font-family:"Courier New", Courier,
monospace; text-decoration:underline; color: black; font-size:24px;
}
</style>
The designation of a dot followed by a name means this style applies to all elements of that class. This is
in contrast to just a name, such as form in the last chapter, in which a style was applied to all form
elements, or to a # followed by a name that refers to the one element in the document with an id of that
name. Notice that the style for letters includes a border, a color, and a background color. Specifying a font
family is a way to pick your favorite font for the task and then specify backups if that font is not available.
This feature of CSS provides a wide latitude to designers. My choices here are "Courier New" , with a
second choice of Courier , and a third choice of any monospace font available (in a monospace font , all
the letters are the same width). I decided to use a monospace font to facilitate making icons that are the
same in size and space nicely across the screen. The margin attribute sets to the spacing outside the
border, and padding refers to the spacing between the text and the border.
We want the buttons representing letters of the alphabet to disappear after they are clicked. The code in
the pickelement function can use the term this to refer to the clicked object. These two statements
(which could be squeezed into one) make this happen by setting the display attribute:
var id = this.id;
document.getElementById(id).style.display = "none";
When the game is over, either through a win or a loss, we remove the click event handling for all the letters
by iterating over all the elements:
for (j=0;j<alphabet.length;j++) {
uniqueid = "a"+String(j);
thingelem = document.getElementById(uniqueid);
thingelem.removeEventListener('click',pickelement,false);
}
The removeEventListener event does what it sounds like: it removes the event handling.
Creating progressive drawings on a canvas
In the chapters so far, you have read about drawing rectangles, text, images, and also paths. The paths
consist of lines and arcs. For Hangman, the drawings are all paths. For this application, code has set the
variable ctx to point to the 2D context of the canvas. Drawing a path involves setting a line width by
setting ctx.lineWidth to a numerical value and setting ctx.strokeStyle to a color. We will use
different line widths and colors for various parts of the drawing.
 
Search WWH ::




Custom Search