INF164 - Assignment 2

INF 164 Assignment 2 - Individual

Due: 3rd November 2024 @ 23:59

IMPORTANT NOTES:
• This is an individual assignment, meaning you should work on it on your own.
• Assignments are based on assessment objectives. If an objective has been achieved, a mark will be allocated.
• All assignments are submitted via ClickUP. See the Assignments section.
• Ensure that you ZIP your assignment correctly. ZIP your entire project folder.
• You may use any of the previous source code shared during the lectures to assist in completing this
Assignment.
• If you are caught plagiarising, we will give you zero percent (0%), and you will be reported for plagiarism
immediately. We will audit historical assignments throughout the semester. We trust that you understand the
importance of this point.
• This assignment will test you on the content taught during the theory and practical classes.

SUBMISSION INSTRUCTIONS:
• Source Code: Zip your source code files together, and name the project folder uXXXXXXXX_Assignment2.zip
after it has been zipped, where the XXXXXXXX is your student number, e.g. u12345678_Assignment2.zip.
• If files are uploaded to the wrong upload area or incorrectly (i.e. there are missing files in the project folder), we
will not look for the upload and will not accept any other form of uploading. Uploads should be submitted
correctly.
• We will not accept email uploads/submissions – and if no files are uploaded, you lose 100%. Please take this
seriously and plan accordingly to submit it on time.

SUBMISSION DEADLINE: 3rd November 2024 @ 23:59

• There shall be no extensions to the deadline above.
• If homework submissions are uploaded too late, then upload errors will happen.
• Do not wait until the last minute to complete the Assignment.
• Start working on the Assignment as soon as possible.
• We Repeat: Email submissions will not be accepted.
• Late submissions will not be accepted.
• No exceptions will be made for anyone.
 INF164 - Assignment 2

Assignment Content:
• The contents of this assignment include the work and concepts covered in the last half of semester 2, INF 164.
Use your C# knowledge regarding code logic and core principles to assist with this assignment.
• This Assignment will cover the basics of web programming:
o HTML
o CSS
o JavaScript

USE CASE:
The assignment requires you to create a bulletin board for INF 164. The bulletin board intends to provide the user
with key dates of the course. The bulletin board is only visible to logged in users so the website will require a
registration and login process.

Remember to pay close attention to the rubric (Shown on the last 2 pages), as this will guide your development.

All aspects of web programming will be tested. HTML for the template structure and meta, CSS for the appearance
and JavaScript to manipulate the DOM.

The bulletin board website needs THREE separate HTML pages:

• Index (Home)
• Register
• Login

Each page needs its respective title tag in the head of the html and a favicon, shown below in a browser tab. Note
that this may look different depending on the browser.

Below are all the screenshots and required screen elements, to be used as a guideline.
 INF164 - Assignment 2

All pages (General):

Screen elements:

• Navigation bar
o Links to all pages
▪ When on the selected page, the link text needs to be bolded and font size slightly
increased. This can be seen in the various screenshots.
▪ When logged in, Login must change to Logout and when pressed, must log the user out:

▪ After logout, the current page must be reloaded to present the user with the logout
version of the page.
▪ HINT – Use localStorage to store the name of the user if successfully logged in and remove
it from localStorage when logging out. This can then be used to determine if user is logged
in by checking if variable exists in localStorage.

• Image Carousel
o A carousel with three images must be present on all three pages with navigation buttons to
navigate to the next/previous image. Without any intervention, the next image must be presented
every 5 seconds, if the end of the list is reached the next image will be the first image (cycle
repeats over and over). All images as well as the favicon is provided.

• Footer
o Each page must have the same footer, this is just an example, and you are welcome to use your
own name in this section.
 INF164 - Assignment 2

Home page:
Not Logged in Example:

Logged in Example:
 INF164 - Assignment 2

Screen elements:
• Headings
• Register and Login Buttons
o The image simply serves as an example and any colour can be used but the colour must change
when the mouse hovers over it. In this case it changes from green to black:

o When clicked, each button must navigate to their respective pages.

• Not Logged in Versus Logged in
o When logged in the content of the page must change and the bulletin board must be visible and
the previous content must be hidden and shown in the images.
o Use a list to present the items of the bulletin board, you can choose any items to add on the
board.
o HINT – Use localStorage in the DOM to see if the user is logged in and if so, get the name of the
user to display it in the heading as shown in the image.
• Remember to refer to rubric.
 INF164 - Assignment 2

Register page:
Not Logged in Example:

Logged in Example:
 INF164 - Assignment 2

Screen elements:
• Register Form
o Heading
o Labels and accompanying input fields:
▪ Full Name
▪ Email
▪ Password
▪ Confirm Password
o Submit button
▪ Must use the same style as the buttons on the home page so must also change colour
when hovering over the button:
o Validation:
▪ All the fields are required and prevent the submission of the form if not all the fields have
been provided:
INF164 - Assignment 2

▪ Add email check to ensure it is a valid email (HINT – simply stating the correct input type
in a form will triggered this validation on a submit event in the DOM:

▪ Add a check to ensure the email address used is unique as the email address serves as the
unique identifier during the login process. Present the user with an alert to inform the
user to login if the email address provided has already been registered.

▪ Add a check to ensure that the Password and Confirmed Password fields match, if not
present the user with an appropriate alert message:

o Form submission, all the captured details must be stored in the localStorage for each registration.
▪ After all checks have passed then proceed to register the user. For this assignment, no
server-side code will be required, therefore registering a user can be performed by adding
the users details in the localStorage (please note that this is not recommended for publicly
accessible websites as this is a security risk, typically one would have a server that handles
the storing of user details on registration). After storing the user details, show an alert
informing the user that the registration was successful:
INF164 - Assignment 2

▪ After registration, the user must automatically be logged in and navigated back to the
home page where the user must now be able to see the items in the bulletin board
(Logged in version of the home page).
▪ Not Logged in Versus Logged in:
• When not logged in the user must see the registration form and if logged in the
user must instead be presented with a message to say, “You are already logged in”
as shown in the image above.
▪ HINT – The below JavaScript snippet shows how the new user details can be stored as well
as how to handle a login using localStorage.

• Remember to refer to rubric.

 INF164 - Assignment 2

Login page:
Not Logged in Example:

Logged in Example:
 INF164 - Assignment 2

Screen elements:
• Login Form
o Heading
o Labels and accompanying input fields:
▪ Email
▪ Password
o Login button
▪ Must use the same style as the buttons on the home page so must also change colour
when hovering over the button:
o Validation and Authentication:
▪ All the fields are required and prevent the submission of the form if not all the fields have
been provided:

▪ Add email check to ensure it is a valid email:

INF164 - Assignment 2

▪ Add check to see if provided email address exists, if it does not exists inform the user with
an appropriate alert message:

▪ If email does exists add a check to see if provided password matches the password stored
against the email address. If not matched, then prompt the user with an appropriate alert:

▪ If the password matched the stored password for the specified email, then proceed with
form submission.
o Form submission, after passing all validation and authentication checks, log the user in and
navigate the user back to the home page where the user must now be able to see the items in the
bulletin board (Logged in version of the home page). HINT – See code snippet provided in
registration page.
• Not Logged in Versus Logged in:
o When not logged in the user must see the login form and if logged in the user must instead be
presented with a message to say, “You are already logged in” as shown in the image above.
Although, the user must not be able to navigate to the login page as the login navigation link has
been replaced with “Logout” after logged in, the user is still able to navigate to the login page by
specifying the URL for the Login page and therefore, a logged in version for this page must also be
created.
• Remember to refer to rubric.
INF164 - Assignment 2

Notes:

• You are free to design and structure the website as you see fit, but you need to ensure that the
requirements for each page are met. You will be marked on the implementation of the
requirements so make sure your application works even when you zip and unzip your source code
to a different location.
• Do not be limited to just your resource material (class notes). There are plenty of online resources
that you can use to assist you with understanding the concepts needed to complete this
assignment.
• Reach out to the assistant lecturers if you need any assistance/clarification (book a consultation
or email us). Do not leave this till the last minute…
• Again, refer to your rubric to understand how the marking will be done and which sections to pay
more attention to and where to score marks.
• The images for the carousel and favicon are available on ClickUp, please use these in your website.

Marking RUBRIC
Outcome Mark

General / 35

Project contains index, register and login HTML files. /3

Project contains a shared CSS file and at least one JavaScript file. /2

All pages have the provided favicon and appropriate title tags. /3

Navigation bar with links to all 3 pages, all redirects work on all pages. /3

Navigation links change size and weight (bold) on selected page for all pages. /2

Navigation Login link changes to Logout when already logged in and back to Login when /5
logged out for all three pages.

Navigation Logout link on all three pages logs the user out and reloads the current page. /5

An image carousel that automatically rotates between three images every 5 seconds with /5
next/previous buttons to manually navigate the images exists on all three pages and works as
expected.

Footer is present on all pages with some text & border. /2

Overall look and feel of the website and buttons that change colour when hovering over the /5
button for all pages. Make sure that content renders properly and does not overlap with
other elements. Use the external CSS approach (shared file) to style the website. Some inline
CSS is acceptable for example hiding certain containers by default and changing those values
in JavaScript when the logged in state changes.
INF164 - Assignment 2

Home Page / 10

Headings and/or text and register and login buttons that navigate to their respective pages. /4

Logged in and logged out versions for Home page – Load and hide correct content based on /6
whether the user is logged in or logged out.

Show list of bulletin items when logged in.

Register Page / 20

Form with all required elements. Make sure the labels are linked to their input fields and that /5
each input field type is correctly defined.

Register form – Validation with appropriate messages: /5

• All fields are required
• Validate email address
• Check if email address has not been used before (i.e. is unique)
• Check that password and confirmed password fields match
Store captured details in the localStorage for each registration and show alert to inform user 5
that registration was successful.
After registration, log user in and navigate to Home page where the user must now be able to /3
see the items in the bulletin board (Logged in version of the home page).
Logged in and logged out versions for Register page – Load and hide correct content based on /2
whether the user is logged in or logged out.
Login Page / 15

Form with all required elements. Make sure the labels are linked to their input fields and that /5
each input field type is correctly defined.

Login form – Validation and authentication with appropriate messages: /5

• All fields are required.
• Validate email address
• Check if registered user with provided email exists
• Check password with stored password if email exists
Perform login and navigate to Home page where the user must now be able to see the items /3
in the bulletin board (Logged in version of the home page).

Logged in and logged out versions for Login page – Load and hide correct content based on /2
whether the user is logged in or logged out.

Total / 80