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"
The calculator should have 18 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
- a button labeled << which shifts the current calculator result to the left (examples: 12345 becomes 23450. 2468 becomes 4680. 0 becomes 0.)
- a button labeled >> which shifts the current calculator result to the right (examples: 12345 becomes 1234. 2468 becomes 246. 0 becomes 0.)
The following examples demonstrate exactly how the calculator should behave. Do not deviate from this behavior, nor display any additional characters nor expressions in the
result field.
• 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)
• User presses C to clear display
• 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)
• User presses C to clear display
• 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)
• User presses C to clear display
• 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)
• User presses C to clear display
• 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