Project Detail

Description

1st- Create a cross-browser (works in Firefox and MS IE) web page:

Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away
Write JavaScript code so that anywhere you in the window, it shows the key you have pressed.
HINT: Use the event object for detecting the key.
HINT: To capture the event use document.onkeypress
HINT: Use String.fromCharCode(Keycode) to convert the keycode obtained from the event back to a character.

Do not simply just write the code, give detailed comments on why you did what to support your coding style.


2nd - Create a cross-browser (works in Firefox and MS IE) input screen that takes in a client’s information for an order:
Full Name (text field)
Address (textarea)
Gender (radio button)
Date of birth (three dropdown lists – day, month, year)
“Send me newsletter” (checkbox)
Hidden total value for order (hidden field)
“Submit Order” button (button).
When the user is done with input, validate using the rules below:
At least 3 characters required in name
Must be over 18 years old
Gender must be selected
If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.
Do not simply just write the code, give detailed comments on why you did what to support your coding style.

3rd - Create a cross-browser (works in Firefox and MS IE) page that has the following headings:

Alternative row color table using ClassName
Input validation and error message
Hide on mouseover, show on mouse out
For item a, create a 10 rows by 3 column HTML table.
Then create two CSS rules called odd and even for which odd’s background color is white an even’s is yellow.
Next register a JavaScript function called ApplyAlternateRows with the onload event that iternates through the rows of the tables and applies the odd class to every odd table row and even class to every even table row
Hint: Get a handle on the table object and iterate through its rows. Use the objects length and rows[] properties.

For item b, create a form with a single input field and a regular HTML button right next to it with a value of Validate.
Then register a JavaScript function called CheckNumeric with the button’s onclick event which ensures checks if the input is not numeric, it displays a message to the right of the button in red.
Hint: Use the function provided below to check if the input is numeric or not.




function IsNumeric(sText) { var ValidChars = "0123456789."; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++){ Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1){ IsNumber = false; } } return IsNumber; }


For item c, create a link with any text and no target.
Then create a single table with a single row with a single cell with background color set to red.
Next, write code hide the table when your mouse moves over the link and show it again when the mouse moves away.
Do not simply just write the code, give detailed comments on why you did what to support your coding style.