Programming JAVAScript & HTML Headers Assignment

There are two assignments in this, and I can include the cataloguepage that is being referenced, or at least its code to it. I’d prefer them both done by the same person so that the code stays similar in how it is done. In the word document; I’ve included a screen shot of what it is looking for in terms of the outputs.

Part I:

Web developers often use JavaScript to validate user inputs or perform calculations before submitting the information to the server. Common validations include checking that the user has entered every required value, that values have a correct format, and that the values are in an acceptable range.

In this Application, use JavaScript to add interaction and validation to your “catalog” web page. First, add an input text box for the user’s age. Next, create functions to validate the name, age, and item selection in a JavaScript file. Specifically, check for the following:

The user has entered a name

Age is a number between 18 and 110

An item is selected

Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the form submission. How can you tell whether the form submitted successfully or not? Modify your JavaScript so that it displays an appropriate confirmation or error message as an alert.

Part II:

Create a new web page with one image and corresponding JavaScript file. You will teach the image to play the “keep away” game.

Give the image an ID so that your script can find it with the getElementById method. Create two JavaScript functions, one that will change the image’s visibility to hidden and one that will make it to visible. Set the image’s onclick attribute to call the hide function. This way, the image will vanish whenever the user clicks on it. Also modify this function so that it calls the other function after a two-second delay. (Hint: use the setTimeout method.)

Next, make the image change its position while it is invisible. You will have to set position style of the image to either relative or absolute and adjust values of the top and left positions in the image style. Note that the positions require units (such as pt or px). Consider how you will calculate a new top and left position for the image.

Submit your pages to the W3C validator (http://validator.w3.org/) and correct all errors. (Note: You may ignore an error concerning placement of the script element.) Include screenshots of the results in your submission.

Also include the full XHTML code for each page, and screenshots of the pages as your Web browser displays them. Summarize the steps you followed to create and perfect the website in a few paragraphs. Outline the difficulties you encountered and how you resolved them.