Question

Censored keyboard

The solution to this exercise involves preventing the default behavior of key events. You can handle either "keypress" or "keydown" . If either of them has preventDefault called on it, the letter will not appear.

Identifying the letter typed requires looking at the keyCode or charCode property and comparing that with the codes for the letters you want to filter. In "keydown" , you do not have to worry about lowercase and uppercase letters, since it identifies only the key pressed. If you decide to handle "keypress" instead, which identifies the actual character typed, you have to make sure you test for both cases. One way to do that would be this:

/[qwx]/i.test(String.fromCharCode(event.charCode))

Mouse trail

Creating the elements is best done in a loop. Append them to the document to make them show up. To be able to access them later to change their position, store the trail elements in an array.

Cycling through them can be done by keeping a counter variable and adding 1 to it every time the "mousemove" event fires. The remainder operator ( % 10 ) can then be used to get a valid array index to pick the element you want to position during a given event.

Another interesting effect can be achieved by modeling a simple physics system. Use the "mousemove" event only to update a pair of variables that track the mouse position. Then use requestAnimationFrame to simulate the trailing elements being attracted to the position of the mouse pointer. At every animation step, update their position based on their position relative to the pointer (and, optionally, a speed that is stored for each element). Figuring out a good way to do this is up to you.

Tabs

One pitfall you’ll probably run into is that you can’t directly use the node’s childNodes property as a collection of tab nodes. For one thing, when you add the buttons, they will also become child nodes and end up in this object because it is live. For another, the text nodes created for the whitespace between the nodes are also in there and should not get their own tabs.

To work around this, start by building up a real array of all the children in the wrapper that have a nodeType of 1.

When registering event handlers on the buttons, the handler functions will need to know which tab element is associated with the button. If they are created in a normal loop, you can access the loop index variable from inside the function, but it won’t give you the correct number because that variable will have been further changed by the loop.

A simple workaround is to use the forEach method and create the handler functions from inside the function passed to forEach . The loop index, which is passed as a second argument to that function, will be a normal local variable there and won’t be overwritten by further iterations.

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.