Reference no: EM133666280

Creating Web Applications

Purpose of the assignment
In this assignment you will further enhance the website you developed in Assignment Part 1. In particular you will
Use client-side storage to transfer data between pages.
Use JavaScript to validate data entered into HTML forms and provide user feed back

Like Part 1, there will be an opportunity to optionally enhance your website beyond the basic requirements.
HTML
This part of the assignment requires minimal alteration to the HTML you wrote in Part 1. All pages should be valid HTML5
CSS
All pages should be styled appropriately using CSS as in Part 1, and should be valid CSS3. Minor additional CSS styling might be required.

Web Site Description
Data Validation
In Part 1 of the assignment you validated most of the inputs on the apply.html form using HTML5. In this part of the assignment we will use JavaScript to do some additional data validation,

in particular where the data entered into one field is validated against the value in another (e.g. postcode and state must be consistent) then this will need to be done in JavaScript.

Specific data validation rules in addition to those define in Part 1 are:
For the date of birth text field, a valid date must be entered in valid dd/mm/yyyy format. Applicants must be at between 15 and 80 years old at the time they fill in the form.
The selected state must match the first digit of the postcode
VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0
(e.g. the postcode 3122 should match the state VIC)
If the "Other skills..." is selected in the Skills Checkbox list, the Other Skills text area cannot be blank.
If the above data does not validate appropriately, meaningful feedback should be given to the user. Error messages should be displayed in an appropriate place on the Web page itself (rather than using an alert box).

Data transfer using Local and Session Storage
jobs.html page. Add an Apply hyperlink in each job description section. When the user clicks on this link they will be transferred to the application form page apply.html Using JavaScript, the Company's position description reference number (5 characters) will be stored using local client-side storage.
apply.html page. When this page is loaded, the job reference number) will be retrieved from local storage, and will be displayed as read-only in the form. This data value will also then need to be sent to the server, along with the other personal data the user enters into the form. (Hint: Lab 7 shows how to use hidden input elements to transfer form data.) While nothing will be stored on the server in this assignment (we will do this in Assignment Part 3), this process will allow the form data passing to be tested.
After a user has applied for one job, if they apply for another job during the same browser session, the browser should remember their details and automatically pre-fill the application form with the information about the applicant. Use session storage for this purpose.

Implementation of JavaScript
There should be no JavaScript embedded in your HTML files. This precludes both event registration (e.g. <form onsubmit="return validate()" ... ) and function definitions in the HTML.

JavaScript should be in a file called apply.js located in a scripts folder.

Enhancements using JavaScript
You should complete the above requirements before attempting any enhancements.

As with Part 1 you have an opportunity to implement enhancements to your Web site using techniques not covered in the tutorials. Each enhancement must be described on a page called enhancements2.html. The entries on this page should:
briefly describe the interaction required to trigger the event and what a programmer has to do to implement the feature.
provide a hyperlink to the page where the enhancement is implemented in your Web site.
reference any 3rd party contribution to the enhancement

It is a good idea to discuss your proposed enhancements with your tutor before you implement them.

The JavaScript enhancements themselves should be in a separate enhancements.js file. Make sure there are adequate comments to explain the enhancement (including its source if applicable). Examples of JavaScript and other enhancements you might make include (but are not limited to):

Have your jobs written in JavaScript and dynamically display the data in the jobs page.

Use the JavaScript methods querySelector() that take a CSS selector as an argument to manipulate the web page in response to user action.

Create an extra client side JavaScript dynamic effect: e.g. Slideshow, random image displayed onload, etc. The code and structure of this is open, but must be documented and explained as clearly as possible.

On apply.html, implement a timer so that the user only has a limited time to complete the application after which a warning is displayed and the browser redirects to the home page.

Use JavaScript to change the Menu display, to reflect the current page being viewed.

Re-implement your JavaScript using a library such as jQuery. Add some enhancements the library provides. No library code should be included in your apply.js file. This alternative implementation should be in the file enhancements.js file. Explain the difference in approach using the library and using plain JavaScript.
...
Any enhancements that are not listed and linked on the page enhancements2.html and
implemented in enhancements.js will not be assessed.

Web Site Folder Structure and Deployment Requirements
Your website folder structure should follow a similar structure as Assignment 1.
All files should be under a folder /assign2. JavaScript should sit in an assign2/script folder.