Next, create the formatPuzzle() function. This function will format the colors of the crossword table cells and the clues in the clues list based on the letter that is selected by user. The function has a single parameter named puzzleLetter. Add the following commands to the function:

Change the value of currentLetter to puzzleLetter.

Remove the current colors in the puzzle by looping through all items in the allLetters object collection, changing the background-color style of each to an empty text string.

After the for loop, remove the highlighting of the current clues by changing the color style of acrossClue and downClue to an empty text string.

Determine whether there exists an across clue for the current letter by testing whether currentLetter.dataset.clueA is not equal to undefined. If true, then do the following:

Set acrossClue to reference the element with the ID value of currentLetter.dataset.clueA in order to reference the across clue for the current letter.

Change the color style of acrossClue to blue.

Set wordLetters to reference all elements selected by the CSS selector [data-clue-A =clue] where clue is the value of data-clue-a for currentLetter.

Change the background-color style of every item in wordLetters to the light blue color value rgb(231, 231, 255).

Repeat Step 4 for the down clue indicated by the data-clue-d attribute, changing the color style of downClue to red and the background-color style of the items in wordLetters to the light red color value rgb(255, 231, 231).

Indicate the typing direction for the current letter. If typeDirection = right, change the background color of currentLetter to the blue color value rgb(191, 191, 255); otherwise, change the background color to the red color value rgb(255, 191, 191).

Event Handler

Return to the init() function and add the following commands to apply the formatPuzzle() function:

Color the crossword puzzles first letter by calling the formatPuzzle() function using currentLetter as the parameter value.

Users should be able to select a puzzle cell using their mouse. Loop through the items in the allLetters object collection and for each item:

Change the cursor style to pointer.

Add onmousedown event handler that runs an anonymous function calling the formatPuzzle() function using the event object target as the parameter value.

Also in the init() function add an event handler to run the selectLetter() function in response to the onkeydown event occurring within the document.

JavaScript Function

Create the selectLetter() function. The purpose of this function is to allow users to select puzzle cells using the keyboard. Add the following commands to the function:

Declare the leftLetter, upLetter, rightLetter, and downLetter variables and set their values to reference the letters to the left, above, to the right, and below the current letter selected in the table.

(Hint: use the dataset.left, dataset.up, dataset.right, and dataset.down properties of currentLetter.)

Store the code of the key pressed by the user in the userKey variable.

(Hint: use the keyCode property of the event object to retrieve the key code value.)

Add the following if-else structure to determine the program response based on the value of userKey:

If userKey equals 37 (the left arrow key), call theformatPuzzle() function using leftLetter as the parameter value

If userKey equals 38 (the up arrow key), call formatPuzzle() with the upLetter variable.

If userKey equals 39 or 9 (the right arrow and tab keys), call formatPuzzle() with the rightLetter variable.

If userKey equals 40 or 13 (the down arrow and enter keys), call formatPuzzle() with the downLetter variable.

If the userKey equals 8 or 46 (the backspace or delete keys), delete the text content of currentLetter.

If userKey equals 32 (the spacebar key), run the switchTypeDirection() function to change the typing direction.

If the code value is between 65 and 90 (the letters a through z), write the character into the cell by changing the text content of currentLetter to the value returned by the getChar() function using userKey as the parameter value and then move to the next cell in the puzzle. If typeDirection is right, move to the next cell by calling the formatPuzzle() function with the rightLetter variable; otherwise, go down to the next cell by calling the formatPuzzle() variable with the downLetter variable.

After the if-else structure, enter a command to prevent the browser from performing the default action in response to the keyboard event.

JavaScript Function

Create the switchTypeDirection() function to toggle the typing direction between right and down. Add the following commands to the function:

Declare the variable typeImage that points to the element with the ID directionImg.

Create an if-else structure that tests the value of the typeDirection global variable.

If typeDirection = right, then change typeDirection to down, change the src attribute of typeImage to pc_right.png, and change the background color of currentLetter to the red color value rgb(255, 191, 191); otherwise change the typeDirection to right, change the src attribute of typeImage to pc_down.png, and change the background color of current letter to rgb(191, 191, 255).

Event Handlers

Users can change the typing direction either by using the keyboard or by clicking the pointer on an image located below the crossword puzzle. Return to the init() function and add the following commands:

Declare the variable typeImage referencing the element with the ID directionImg.

Change the cursor style of type Image to pointer.

Run the switchTypeDirection() function when the typeImage is clicked

Bernard wants users to be able to briefly view their mistakes. Add an onclick event handler to the init() function that runs the following commands when the user clicks the Show Errors button:

Loop through all items in the allLetters object collection. If the text content of an item does not match the value of the letters dataset.letter property, change the color style of the letter to red.

After a 3-second interval, set the color style for the items in the allLetters collection to an empty text string, restoring the letters to the default font color.

Complete the init() function by adding an onclick event handler to the Show Solution button. In response to the click event, run an anonymous function containing a for loop that goes through all items in the allLetters collection, setting the text content of each item to the value of the letters dataset.letter property.

Tasks

Create the formatPuzzle() function described above.

Add formatPuzzle() to the init() function according to the steps above.

Add selectLetter() to the init() function according to the steps above.

Create the selectLetter function described above.

Create the switchTypeDirection() function decribed above.

Add switchTypeDirection() to the init() function according to the steps above.

Add an onclick handler to the 'Show Errors' button

Add an onclick handler to the 'Show Solution' button