Web Development COS10005 - Assignment 2
Swinburne University of Technology
Faculty of Science, Engineering and Technology
Web Development
COS10005
Assignment 2, Semester 1, 2020
Due Date Monday 1st June 2020 at 05:00pm
Submission Method ESP (https://esp.swin.edu.au)
Contribution to Final Assessment 30%
Purpose of the assignment: It is an individual assignment that provides an opportunity to practice
again techniques and skills involved in designing webpages using HTML5 and CSS. JavaScript will be
used to validate user input data before they are submitted to the server for processing. Moreover,
JavaScript will be used to add more interactivity to the webpages.
Requirements and Specifications
The assignment requires that you develop a website for Bruno Pizzeria, a pizza store. The director of
Bruno Pizzeria, Mr. Bruno, is interested in developing a website that allows users to register and place
orders for pizzas online.
Task 1: Website Design
After several meetings with the Mr. Bruno, it is agreed that 3 webpages will be developed, the home
page, the registration page and the order page.
1.1 Folder Structure
The directory structure shown in Figure 1 is to be created.
Figure 1: Directory structure
Additional files may be added depending on your own design.
register.html
assignment2
index.html
css
style.css
potatochip.png
order.html
images
potatochip.png logo.png
js
script.js
Web Development COS10005 - Assignment 2
1.2 Website Structure
Choose your own webpage structure. A fully functional navigator must be provided on each webpage.
Users should be able to access all 3 webpages using the navigator.
1.3 Webpage Layout
You need to design an appropriate webpage layout for Bruno Pizzeria. Following structural elements
must be used:
You are free to use other structural elements, e.g.,
.
Task 2: Website Development
2.1 HTML 5 Webpages
The three webpages must be developed using HTML5. All pages must not contain any deprecated
elements/attributes. The content requirements for each webpage are as follows:
Page index.html is the homepage of the website. It should provide introductory
information about Bruno Pizzeria, its history, menu, location, available types of pizzas, etc.
Feel free to refer to real-world pizza store websites for example. Information about at least
three types of pizzas must be provided, with at least three original or explicitly referenced
images.
Page registration.html is for users to register. A form must be provided, which
contains different input elements that allow users to enter registration information, e.g.,
username, password, gender, email, favourite pizzas, etc. The following input elements must
be used:
o label
o textbox
o password
o radio button
o checkbox
o select list
o submit button
o reset button
Page order.html is for users to place orders. A form
must be provided to allow users to enter the following
data to place an order:
o Delivery or pickup
o Delivery address (only if delivery is selected)
o Billing address
o Contact number
o Email for receipt
o Pay on pickup or online
o Credit card information (only if pay online is
selected)
Choose the right types of
input elements for different
required information in the
forms, e.g., a textbox for
username and a group of
checkboxes for favourite
pizzas.
Other input elements can be
used in your forms if necessary
and appropriate for the
content. Set the method
attribute of the form to POST
and the attribute action to:
http://mercury.swin.
edu.au/it000000/cos1
0005/regtest.php
All webpages must be fully
validated.
Web Development COS10005 - Assignment 2
2.2: CSS Files
At least one CSS file is to be created to style all three HTML pages. Use any CSS properties you deem
necessary and appropriate for the presentation. The following CSS properties must be used:
color
font-family
background-color
background-image
border
text-shadow
box-shadow
margin
padding
float
The following types of CSS selectors must be used:
element e.g., h1 {}, p {}
class, e.g., .image {}, .highlighted
{}
id e.g., #tbName {}
grouping e.g., h1, h2, h3 {}
contextual e.g., ul li {}
pseudo-classes e.g., :hover {}
2.3: JavaScript File
A JavaScript file must be created for the registration and the order pages to validate the input data
before forms are submitted to the server for processing. The JavaScript must
check that none of the required input fields are blank.
check that the password is at least 8-character long;
check that the postcode is 4-digit.
show an alert or inline error messages to display all the errors in the input fields;
allow the form to be submitted only if all the input data are valid.
Task 3: Website Enhancement
3.1 Features
Implement the following 3 features using appropriate HTML, CSS and JavaScript:
Highlight the menu item in the navigator corresponding to the current webpage.
In page order.html, create a checkbox with label “same as delivery address” somewhere
appropriate near the fields for billing address. When this checkbox is checked, the fields for
billing address will be filled with the delivery address automatically. If the delivery address is
not completed when this checkbox is checked, display an alert or inline message: “Please
enter your delivery address first”.
Allow users to choose from three types of credit card: Visa, MasterCard and American Express.
Based on the type of credit card, limit the length of the credit card number, 16 digits for Visa
and MasterCard, 15 digits for American Express.
Other CSS properties can be
used. You are encouraged to be
creative in your design. You will
be marked not only on the use of
the abovementioned CSS
properties and CSS selectors,
but also on how professional,
beautiful and creative your
webpages look.
Make sure the styles of all three
webpages are consistent.
You CSS file(s) must be fully
validated.
Web Development COS10005 - Assignment 2
3.2 Features Page
Create a fourth page named features.html and incorporate it into the navigator. On this
webpage, list the features that you have implemented and provides hyperlinks to indicate where those
features are implemented.
Submission
Before submitting the assignment, please ensure that you have completed or considered the
following:
Check your assignment against the attached marking scheme.
Check Canvas for announcements related to the assignment;
Ensure that all HTML and CSS files can be fully validated;
The assignment is your original work. If your assignment is not your original work, your result will
be 0 marks for this assignment;
Provide references for all third-party contents used on your webpages;
Test your web pages on the Mercury server. If your assignment cannot be displayed on Mercury
properly, penalties will apply; and
Make sure you contact your convenor before the due date, if you are having trouble in submitting
the assignment on time.
The assignment should be submitted as an individual work through ESP (Electronic Submission
Processor) at https://esp.swin.edu.au on or before the deadline.
Compress all your HTML, CSS, JavaScript and image files into a zip file named
“wd_assignment_2.zip” to submit via ESP.
You can submit the zip file for up to 5 times through ESP and the latest submission will
overwrite the previous ones.
Make sure you keep a copy of the assignment cover sheet.
Web Development COS10005 - Assignment 2
Marking Scheme
The assignment will be marked out of 100.
Mark Requirements Deductions