Need Help coding this JS file:

- Create the init() function, which sets up the initial conditions of the puzzle. Add the following commands to the function:

1. Set allLetters to reference the elements using the selector table#crossword span.

2. Set currentLetter to reference the first object in allLetters collection

3. Declare the acrossID variable, setting its value equal to the value of the data- clue-a attribute for currentLetter. Declare the downID variable, setting its value equal to the value of the data-clue-d attribute for currentLetter.

4. Set the value of acrossClue to reference the element with the id attribute "acrossID". Set the value of downClue to reference the element with the id attribute downID.

- 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:

1. Change the value of currentLetter to puzzleLetter.

2. 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.

3. 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.

4. 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:

   1. 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.

   2. Change the color style of acrossClue to blue.

   3. 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.

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

5. 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).

6. 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).

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

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

2. 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:

   1. Change the cursor style to pointer.

   2. 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.

- 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:

1. 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.)

2. 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.)

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

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

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

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

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

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

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

   7. 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.

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

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

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

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

3. 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).

- 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:

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

2. Change the cursor style of type Image to pointer.

3. 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:

1. 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.
2. 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

Here is the code completed so far:

"use strict";

/*

New Perspectives on HTML5, CSS3 and JavaScript 6th Edition

Tutorial 11

Case Problem 3

Crossword Puzzle Script

Author:

Date:

Global Variables

================

allLetters

References all of the letter cells in the crossword table#crossword

currentLetter

References the letter currently selected in the puzzleLetter

wordLetters

References the across and down letters in the word(s) associated with the current letter

acrossClue

References the across clue associated with the current letter

downClue

References the down clue associated with the current letter

Functions

=========

init()

Initializes the puzzle, setting up the event handlers and the variable values

formatPuzzle(puzzleLetter)

Formats the appearance of the puzzle given the selected puzzle letter

selectLetter(e)

Applies keyboard actions to select a letter or modify the puzzle navigation

switchTypeDirection()

Toggles the typing direction between right and down

getChar(keyNum)

Returns the text character associated with the key code value, keyNum

*/

/* Global Variables */

var allLetters;

var currentLetter;

var wordLetters;

var acrossClue;

var downClue;

var typeDirection = "right";

/* Command to run init() function */

window.onload = init;

function init() {

}

function formatPuzzle(puzzleLetter) {

}

function selectLetter(e) {

}

function switchTypeDirection() {

}

/*====================================================*/

function getChar(keyNum) {

return String.fromCharCode(keyNum);

}