Can anyone code the following?

5

Create the init() function. The purpose of the function is to define the event listeners used in the page. Add the following commands to the function:

Declare the stars variable that stores an object collection of the reviewing stars, referenced by the span#stars img selector.

Loop through the star collection and for each star image in the collection change the cursor style to pointer and add an event listener to run the lightStars() function in response to the mouseenter event occurring over each star image.

After the for loop, add an event listener to the comment text area box that runs the updateCount() function in response to the keyup event.

6

Create the lightStars() function. The purpose of this function is to color a star when the user moves the mouse pointer over a star image in order to reflect the users rating of the book. Add the following commands to the function:

Daniel has stored the rating value of each star image in the img elements altattribute. Store the value of the alt attribute of the target of the event object in the starNumber variable.

Declare the stars variable containing the object collection referenced by the selector span#stars img.

Loop through the stars collection with an index ranging from 0 up to less than the value of the starNumber variable. Light every star in the collection by changing the src attribute of the star image to the bw_star2.png image file.

After the for loop, create another loop that loops through the stars collection with the index ranging from the value of the starNumber variable to less than 5. Unlight every star in this collection by changing the src attribute of the star image to the bw_star.png image file.

Change the value of the input box with the id attribute rating to starNumber stars, where starNumber is the value of the starNumber variable.

When the mouse pointer moves off a star image, the lit stars should be unlit. Add an event listener to the target of the event object that runs the turnOffStars() function in response to the mouseleave event.

If the user clicks the star image, the selected rating should be set, which means moving the mouse pointer off the star should not remove the rating. Add an event listener for the target of the event object that runs an anonymous function removing the turnOffStars() function from the mouseleave event.

7

Create the turnOffStars() function. The purpose of this function is to unlight the stars when the user moves the mouse pointer off the star images. Add the following commands to the function:

Declare the stars variable containing the object collection referenced by the selector span#stars img.

Loop through all images in the stars collection and change the src attribute of each image to the bw_star.png file.

Change the value of the rating input box to an empty text string.

8

Create the updateCount() function that keeps a running total of the number of characters that the user has typed into the comment text area box. Add the following commands to the function:

Declare the commentText variable that references the value stored in the comment text area box.

Use the countCharacters() function with commentText as the parameter value to calculate the number of characters in commentText. Store the value in the charCount variable.

Declare the wordCountBox that references the wordCount input box.

Change the value stored in the wordCount input box to the text string charCount/1000 where charCount is the value of the charCount variable.

If charCount is greater than 1000, change the style of the wordCount input box to a white font on a red background, otherwise set the style to a black font on a white background.

9

Document your work with descriptive comments throughout the file and save the script file.

10

Open bw_review.html in your browser. Verify that as you move your mouse pointer over the stars below the book description, the rating value automatically matches your selection. Also verify that moving the mouse pointer off the star images removes the rating unless you have clicked one of the stars. Finally, verify that as you type characters into the text area box, a running count of the character total is shown below the box and, if the number of characters exceeds 1000, the total is displayed in a white font on a red background.

JS Code:

"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

*/

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

function getChar(keyNum) { return String.fromCharCode(keyNum); }