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
Like Part 1, there will be an opportunity to optionally enhance your website beyond the basic requirements.
This part of the assignment requires minimal alteration to the HTML you wrote in Part 1. All pages should be valid HTML5
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
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 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
- 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
- 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 Use session storage for this purpose.
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
- provide a hyperlink to the page where the enhancement is implemented in your Web
- 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.
- 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
Any enhancements that are not listed and linked on the page enhancements2.html and
implemented in enhancements.js will not be assessed.
Up to 10 marks will be allocated to each enhancement. A maximum of 2 enhancements will be assessed.
Web Site Folder Structure and Deployment Requirements
Your website folder structure should follow a similar structure as Assignment 1.
- HTML files should only be in the base “assign2/” folder – not anywhere else.
Assignment Submission (Canvas + Mercury)
Your assignment should be uploaded to Mercury on or before your deadline.
An electronic copy of your assignment should be submitted through Canvas on or before your deadline.
- You can submit more than once through Your last submission will be marked.
- Note that all deliverables must be submitted electronically. There is no need to submit an assignment cover