html/javascript

COMP 484L Spring 2014 Lab 2

Due Thursday, April 3rd 2014 23:55 – Week 11

Late submissions will be penalized by 5% per day (or part thereof), up to 20 days. After 20 days, the assignment will be given a 0%.

Purpose: You are going to learn basic form validation and event handling in JavaScript. Requirements: To complete this project you will write and submit one HTML file containing embedded CSS and JavaScript. The file will be called lab2.html. This file contains a registration form, which can be styled any way you like subject to the requirements below. This file must be an ASCII file (i.e. a plain text document with a .html extension). You may create it with any editor but you must ensure that it is a text file. In other words, it should not contain anything except ASCII characters (including HTML tags/CSS rules/JavaScript and content). YOU MAY USE A WYSIWYG EDITOR! This editor can be used to generate the HTML markup of your document. Any CSS or JavaScript must be subsequently added to this file by hand (i.e. manually editing the HTML file). This lab will be a simple registration form. Every visible form input should be labeled with explanatory text. The form should have the following inputs:

• First and last name (2 separate text fields) o The user should enter only letters in each field, with the first letter capitalized

• Student ID number (a text field) o The user should enter a 9 digit number

• Biography (a textarea) o The user may enter up to 25 words

• Calculator o The calculator should have a text field where result is displayed

! If the user types in the text field, as long as the result is numeric, it can be used – (typing in the text field clears previous contents)

! If the user types non-numeric data in the text field, when the user presses any button, the text field should change to “ERROR: press C”

o The calculator should have 16 buttons (of button input type) ! 0-9 buttons, laid out any way you like

• These start a new number with the corresponding digit value if no number has been entered yet, or append the corresponding digit value to a number

! C button, which clears the result text field, and current calculated result, leaving the result text field blank

! = button, which performs the last operation pressed and generates a new result in the result text field

! +, -, /, and * buttons, which append the corresponding operation to the expression

! EXAMPLE • User presses 2 button (2 is displayed in result) • User presses + button • User presses 4 button (4 is displayed in result) • User presses = button (6 is displayed in result)

! EXAMPLE • User presses C • User presses 2 button (2 is displayed in result) • User presses 4 button (24 is displayed in result) • User presses / button • User presses 3 button (3 is displayed in result) • User presses = button (8 is displayed in result)

! EXAMPLE • User presses C • User presses 2 button (2 is displayed in result) • User presses 4 button (24 is displayed in result) • User presses / button • User presses 1 button (1 is displayed in result) • User presses 2 button (12 is displayed in result) • User presses = button (2 is displayed in result)

! EXAMPLE • User presses C • User types 24 in result field (24 is displayed in result) • User presses / button • User presses 1 button (1 is displayed in result) • User presses 2 button (12 is displayed in result) • User presses = button (2 is displayed in result)

! EXAMPLE • User presses C • User types 24h in result field (24h is displayed in result) • User presses / button (“ERROR: press C” is displayed in result)

o User must press C to clear result

• A button labeled “Save” which transfers the current calculator result to a span labeled “Hours Worked This Week”

o The span whose label is “Hours Worked This Week” is initialized to empty ! Should read

Hours Worked This Week:

o If the user presses “Save” when the calculator result is either empty or not a number, a message should appear on the page (in differently colored error text) telling the user that this is not a valid number of hours worked. The span labeled “Hours Worked This Week” shall either remain empty (if previously empty) or be cleared/reset (if previously stored a value).

• Submit (a submit input type)

When the user presses the Submit button, the form is checked… FOR VALID FORMS If the form is valid (i.e. abides by the rules above, with no rules governing the calculator’s result at the time of submission), then an alert should pop up summarizing all the values the user entered (including current calculator result as well as the saved “Hours Worked This Week” value, if any), and stating that form submission was successful. Note: the user need not save an “Hours Worked This Week” for valid form submission (i.e. this span can remain blank). All other fields must be non-empty, except the calculator result which can be anything. If the user did not save an “Hours Worked This Week,” then neither this heading nor any associated value should appear in the summary alert message. FOR INVALID FORMS If the form is invalid, no alert should pop up. Rather, for invalid forms, the form page’s background should change color (this can be accomplished with a div that encloses all other content, if you like), and error text should be added to the page (previously invisible/not displayed) that details all the current errors. The error text should stand out and be colored differently than any other elements on the page, much like the error message mentioned above for the “Hours Worked This Week” span. You may change the class attribute of the error text and body/div elements using JavaScript to accomplish this effect, where the classes are defined in embedded CSS. NO SUBMISSION The page should not actually submit! In other words, submission should be prevented using the preventDefault method on the event object (in the form’s submission handler function). OTHER NOTES The stylesheet and JavaScript should be embedded in the <head> section of the HTML document. The JavaScript code must use functions where appropriate (i.e. formSubmitted() for form submission, equalButtonPressed() for the = button of the calculator, etc). These functions may be anonymous functions, as we will discuss in class. (In other words, they can be defined in- place with no function name in the call to addEventListener, or similar.) The JavaScript code should have occasional explanatory comments where appropriate (on the order of once or twice per function). Submission: Prior to the deadline upload your file lab2.html to Moodle. Do not submit any other documents!

Grade Breakdown: 10%: Submission instructions followed to the letter (1 html file submitted, named as stated above, with no contents except plain-text HTML as well as CSS and JavaScript in the head) 10%: JavaScript has proper formatting, proper use of functions, and comments as appropriate 20%: Web page renders properly in Mozilla Firefox 17+ as well as Internet Explorer 9+ 30%: Web page contains all required content, behaving according to spec 30%: JavaScript code abides by spec Cheating: This project (like all projects in this class) is an individual project. You can discuss this project with other students. You can explain what needs to be done and give suggestions on how to do it. You cannot share source code. If two projects are submitted which show significant similarity in source code then both students will receive an F on the assignment. Note a person who gives her/his code to another student also fails the class (as they are facilitating the dishonest actions of another). Source code that is copied from websites without citation will also count as cheating, and the same consequences apply.