Description
I NEED HELP WITH THIS QUESTION
Unformatted Attachment Preview
Swinburne University of Technology
COS10011/60004
Creating Web Applications
Assignment Part 2
Develop an Interactive Website
Important Dates:
10am on Monday in Week 8
(Late submission penalty: 10% of total available marks per day)
Due Date
Demonstration
Your tutorial, Week 8 (Demonstration is mandatory)
Contribution to Final Assessment: 30%
Note:
You must meet the Essential Requirements of this assignment to be
eligible to submit Part 3 of the assignment.
Note: Do not use JavaScript libraries (e.g. jQuery) in the main part of this assignment. You may
create an additional alternative implementation using a library as an enhancement (see
enhancements section below).
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.
If you wish to make other HTML and CSS alterations to your Assignment Part 1 that is OK (but you
must keep your assigned job role).
Remember: You need to implement your website in standard HTML5.
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 format.
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 blank.
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).
Data transfer using Local and Session Storage
1. 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.
2. 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.
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 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.
Purchase answer to see full
attachment
