COMP 307 Principles of Web Development Mini Assignment 7 solved

$35.00

Category: You will receive a download link of the .ZIP file upon Payment

Description

5/5 - (1 vote)

In this mini assignment, you will create a new HTML document that will use the

tag and
JavaScript to make it interactive. Prettiness and being interactive are important for this assignment.
Note, responsiveness is not important for this assignment.
This is a PeerGrade assignment. You will create the webpage and then submit it to PeerGrade for your
classmates to evaluate. It may be helpful to complete this week’s lab before doing this assignment.
Please do the following:
Below you see two images of a registration form called register.html. The first image shows
the page before the user interacted with it. The second image shows the page after the user
incorrectly interacted with it. The page does not look pretty.
Image #1
McGill CCOMP 307 Mini #7
Vybihal School of Computer Science 2 of 3
Image #2
Your job is to:
1. Create the above form. Note the action and method attributes will be left blank. The submit
button will not call the backend. This is a local application.
2. Use JS to display the errors messages as described. Consult this week’s lab for help.
3. Use HTML5 input attributes where ever possible, like the phone number input.
4. Place random computer science books in the dropdown, including the one shown in the
image.
5. After a book has been selected display, below the section, in green, the name of the book as
confirmation of their selection. The selection should display — pick a book — as the
default.
6. The submit button should not work when there are errors on the page. Prevent the submit
button from processing the submit operation when an error exists. Instead, the submit button
will use the alert() function to display the message “Please correct the errors on the page and
submit again”. Once the user corrects the errors then the submit button should work without
error message.
7. Make this webpage pretty using CSS and HTML. Please be creative.
a. Your peer’s will be asked to evaluate both how interactive the page is and whether it
is nice to look at.
8. Do not make the page responsive. Assume the page fits on a fixed screen of 800 pixels wide.
McGill CCOMP 307 Mini #7
Vybihal School of Computer Science 3 of 3
WHAT TO HAND IN
• A single HTML page called register.html.
• Submit this to PeerGrade
HOW IT WILL BE GRADED
Students will be asked to evaluate the following:
– Does the page work?
– Does it satisfy all the interactive requirements?
– Is the page pretty?
– Students will be asked to comment on your page