COS10011 - Assignment Part 2 - Develop an Interactive Website

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
• 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:

1. 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.
2. 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)

3. If the “Other skills…” is selected in the Skills Checkbox list, the Other Skills text area cannot be
4. 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).

Get Your Customize Task on any subject starting 10$/Page

Order Now Whatsapp Now

Data transfer using Local and Session Storage

1. 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.
2. 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.
3. 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.

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
• provide a hyperlink to the page where the enhancement is implemented in your Web
• reference any 3^rd 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
• Use the JavaScript methods querySelector() that take a CSS selector as an argument to manipulate the web page in response to user
• 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
• 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
• Use JavaScript to change the Menu display, to reflect the current page being
• Re-implement your JavaScript using a library such as jQuery. Add some enhancements the library provides. No library code should be included in your 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.

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.

All files should be under a folder /assign2. JavaScript should sit in an assign2/script folder.

Notes:

• HTML files should only be in the base “assign2/” folder – not anywhere else.
• All links to your files (JavaScript, CSS or images) should be relative. Do not use absolute links, as these links will be broken when files are transferred for marking. No marks will be allocated if links are

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.

• Make sure all your files are in the correct folders and compress your root folder with all your sub-folders with HTML, CSS, Javascript and images into a zip file named “assign2.zip”. Submit this to Canvas. When the zip file is decompressed, the entire website should be able to be run from html without needing to move any files.
• 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