Description
In this mini assignment, you will create a new HTML document that will use thetag 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