Description
1. Use the attached js library, utilities.js, when doing steps 2 to 4. To use the js library, you need to add the following script tag before all other script tags in all html pages and put the file in the same directory, which all html pages are located.
2. Revise the product_order.html page to include a “comments” (text area control) for user comments. Using the event handling utility (utilities.js) from step 1, create a function (limitText()) in the product_order.js to limit the input up to 100 characters. Also, add a span tag below the text area control that shows the character count.
If utilities.js is used, document.getElementById(‘id’) can be replaced with U.(‘id’)
To limit the number of characters, the following statements can be used
// to get the comments element
var comments = U.$(‘comments’);
// to count the number of characters
var count = comments.value.length;
// to display the count
U.$(‘count’).innerHTML = count;
// to cut the overage
if (count > 100) {
comments.value = comments.value.slice(0, 100);
}
3. Revise the product_order.html and product_order.js to add a division (
U.addEvent(U.$(‘current_datetime’), ‘mouseover’, function() {
// update the date/time
});
4. Revise the product_order.html to include a “Reset” button.
Create a function, called reset(), in the product_order.js to reset all the user inputs and remove error messages. Then add the following event handler in the init () function to prevent the user from accidentally resetting the form.
U.addEvent(U.$(‘reset_button’), ‘click’, function(){
var result = confirm(“Are you sure?”);
if (result){
reset();
}
});
5. Revise login.html to include validation routines. If the user name and/or password text box are empty, display error messages. Add the focus() method to set focus on the empty control.
6.