SummaryOnline BookwormsA preview of the page you will create is shown below.Instructions

?|Daniel Palmer is a content manager of Online Bookworms, a website dedicated to lovers of books and reading. One of Daniel's tasks is to create a comments page in which users can enter short comments in a text area box about books they have read. To keep the comments short and to the point, Daniel wants to limit each comment to 1000 words. He asks you to write a script that will update a character counter that shows the user how much of the 1000 characters has already been typed.?

Daniel also wants users to be able to rate the books by moving a mouse pointer over a row of five stars. If the user moves the mouse pointer over the third star, the first three stars should be lit. If the user moves the mouse pointer over the fourth star, the first four stars should be lit and so forth. Clicking a star image enters that rating into an input box for processing.

This Case Problem contains interactive instructions that you can complete to ensure you've completed the instruction correctly.

After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

After you've completed an instruction, click the corresponding check box in your list of instructions. This will trigger simulated tests of your website to ensure that you successfully completed the instruction.

When you reach the end of the lab, click the Submit button to record your score.

Click Next Step to get started!

Open the bw_review.html and bw_review.js files and enter your nameand?the date in the comment section of each file.?

Return to the bw_review.html file. Go to the document head and add a script element for the bw_review.js file. Load the file asynchronously.

JavaScript Setup

Return to the bw_review.js file in your editor. Directly after the initial comment section, insert an event handler that runs the init() function when the page is loaded by the browser.

Event Listeners

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:

1. Declare the?stars?variable that stores an object collection of the reviewing stars, referenced by the?span#stars?img selector.
2. 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.
3. 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.

Javascript Functions

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 user's rating of the book. Add the following commands to the function:

1. Daniel has stored the rating value of each star image in the img element's?alt?attribute. Store the value of the?alt?attribute of the target of the event object in the?starNumber?variable.
2. Declare the?stars?variable containing the object collection referenced by the selector?span#stars?img.
3. 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.
4. After the for loop, create another loop that loops through the stars collection with the index ranging from the value of the starNumbervariable to less than 5. Unlight every star in this collection by changing the src attribute of the star image to the bw_star.pngimage file.
5. Change the value of the input box with the?id?attribute "rating" to?starNumber stars, where?starNumber?is the value of the?starNumber?variable.
6. 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.
7. 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.

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:

1. Declare the?stars?variable containing the object collection referenced by the selector?span#stars?img.
2. Loop through all images in the stars collection and change the src attribute of each image to the bw_star.png file.
3. Change the value of the rating input box to an empty text string.

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:

1. Declare the?commentText?variable that references the value stored in the comment text area box.
2. 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.
3. Declare the?wordCountBox?that references the?wordCount?input box.
4. Change the value stored in the wordCount input box to the text string charCount/1000 where charCount is the value of the charCount variable.
5. If charCount is greater than 1000, change the style of the?wordCountinput box to a white font on a red background, otherwise set the style to a black font on a white background.

Verify

Open bw_review.html in your browser. Click the Build Website button at the bottom of the window.?

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.

When you're happy with your results, click the Submit button to submit your project for grading.

Validate

You can use the?W3C HTML Validatorto ensure that your HTML files adhere to World Wide Web (W3) standards. This also helps improve the readability of your HTML files, making them easier to work with.

Build

Click the Build Website button at the bottom right of the window. Verify that the layout and design styles resembles the finished website shown in the Introduction.

When you're happy with your results, click the Submit button to record your score.

? ?

? ?

? ?

? ?

? ?

? ?

? ?

? ? ? ??

? ? ?

? ? ? ? ?

? ? ? ? ? ?

• My Account

? ? ? ? ? ?

• Contact Us

? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ?

? ? ?

? ? ?

? ? ? ? ?

? ? ? ? ? ?

• Home

? ? ? ? ? ?

• Reviews

? ? ? ? ? ?

• Forums

? ? ? ? ? ?

• Book Swaps

? ? ? ? ? ?

• OBW Store

? ? ? ? ? ?

• Author's Corner
? ? ? ? ??

? ? ? ? ?

? ? ? ? ? ?

? ?

? ?

? ?

? ? ?

? ? ? ? ?

? ? ? ? ? ?

• Comments on this Title

? ? ? ? ? ?

• Reviews of this Title

? ? ? ? ? ?

• Order this Title from OBW

? ? ? ? ? ?

• Find a Book Swap

? ? ? ? ? ?

• Other Books by this Author

? ? ? ? ? ?

• Other Books in this Series

? ? ? ? ? ?

• Recommended Books in this Genre

? ? ? ? ? ?

• My Reading List

? ? ? ? ? ?

• Review a Book

? ? ? ? ? ?

• Join a Discussion

? ? ? ? ? ?

• Post to a Forum

? ? ? ? ? ?

• My Mail

? ? ? ? ? ?

• My Posts

? ? ? ? ? ?

• Reading Recommendations

? ? ? ? ? ?

• Books of the Month

? ? ? ? ? ?

• Tech Support
? ? ??

? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ?

? ? ??

? ? ?

? ? ? ? ?

Post Captain

? ? ? ? ?

by Patrick O'Brian

? ? ? ? ?

W.W. Norton & Company, Inc.

? ? ? ? ? ? ?500 Fifth Avenue, New York, N.Y. 10110

? ? ? ? ? ? ?ISBN: 0-393-30706-9

? ? ? ? ? ? ?? Patrick O'Brian 1972

? ? ? ? ?

? ? ? ? ?

Genre: Historical Fiction

? ? ? ? ?

The second novel in Patrick O'Brian's popular series of

? ? ? ? ? ? adventures involving Captain Jack Aubrey and?

? ? ? ? ? ? Doctor Stephen Maturin finds the pair

? ? ? ? ? ? dealing with the onset of war in 1803 after the breaking of

? ? ? ? ? ? the Peace of Amiens. Eager to return to the fight, Aubrey escapes?

? ? ? ? ? ? from France to return to Britain, only to be faced with the

? ? ? ? ? ? prospect of years served in debtors' prison at the hands of his

? ? ? ? ? ? creditors and their agents. Meanwhile, Maturin must negotiate the

? ? ? ? ? ? more daunting rocks and shoals of love and romance without

? ? ? ? ? ? endangering his friendship with Aubrey.

? ? ? ? ?

? ? ? ? ?

? ? ? ? ?

? ? ? ? ? ? Rate this title

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ??

? ? ? ? ? ?

? ? ? ? ? ? ? ?Comment on this title (comments limited to 1000 characters)

? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ??

? ? ? ? ? ?

? ? ? ? ? ? ? ?Character Count:

? ? ? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ??

? ? ? ? ? ?

? ? ? ? ?

? ? ?

? ? ? ? ? ?

? ? ?

? ? ? ? ?

Reader Reviews

? ? ? ? ?

? ? ? ? ? ?

Superb Sequel

? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

? ? ? ? ? ?

By	AlisonJ (Seattle, WA)
Review Date	3/5/2018
Rating	? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ?

An excellent sequel to Master and Commander. You might have difficulty following the nautical

? ? ? ? ? ? ? ?jargon, but it improves in time as you are drawn into O'Brian's fully-realized world.

? ? ? ? ?

? ? ? ? ?

? ? ? ? ? ?

The Movie is Better

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

By	DrewT (Des Moines, IA)
Review Date	3/5/2018
Rating

? ? ? ? ? ? ? ?

After loving the movie, I turned to the Aubrey/Maturin novels with great anticipation. Unfortunately, I

? ? ? ? ? ? ? ? ? found the series long and tiresome. Your mileage might differ.

? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ? ? ?

A Modern Classic

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?

By	MaryK (Ancourage, AK)
Review Date	3/4/2018
Rating

? ? ? ? ? ? ? ?

These books are either loved or hated. They can be difficult but the stories are rewarding

? ? ? ? ? ? ? ? ? to the reader who makes the effort.

? ? ? ? ? ?

?

? ? ? ? ? ?

Read More Reviews

? ? ? ? ? ?

? ? ?

? ?

? ?

? ?

? ? ?

Online Bookworms ? 2018 All Rights Reserved

? ?

BW_Review.JS

"use strict";

/*

? ?New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

? ?Tutorial 11

? ?Case Problem 1

? ?Author: kirn Latif

? ?Date: ?03/28/2020

? ?

? ?Filename: bw_review.js

??

? ?Functions List:

? ?init()

? ? ? Initializes the contents of the web page and sets up the

? ? ? event handlers.

? ? ??

? ?lightStars(e)

? ? ? Function that colors the stars representing the user rating

? ? ? for the book.

? ? ??

? ?turnOffStars(e)

? ? ? Function that restores the stars to empty colors, removing

? ? ? the user rating for the book.

? ?updateCount()

? ? ? Updates the count of characters in the wordCountBox

? ? ? element.

? ?countCharacters(textStr)

? ? ? Returns the number of a non-whitespace characters

? ? ? within textStr

*/

??

??

??

??

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

function countCharacters(textStr) {

? ?var commentregx = /s/g;

? ?var chars = textStr.replace(commentregx, "");

? ?return chars.length;

}?