Comp 484L Summer 2015 Lab 2 Due June 24, 2015

Comp 484l Summer 2015 Lab 2due Wednesday June 24th 2015 2355

To complete this project, you will create a single HTML file named lab2.html that includes embedded CSS and JavaScript. The file will contain a registration form with specific inputs, styling, and validation rules. The form is for user registration and includes fields for first and last name, student ID, biography, a calculator with specific behaviors, and a submit button. The form must disable default submission and instead validate inputs, show errors or success messages, and support calculator operations such as basic calculations, shifting digits, and saving results. Detailed requirements include input validation for names, ID number, and biography word count, as well as complex calculator functionality that responds to user interactions, handles errors, and updates designated page elements. The form’s submission should trigger a JavaScript function that verifies all inputs are valid, prevents default form submission behavior, and displays a summary alert if all conditions are met or displays error messages and color changes if invalid. The embedded CSS should style the form and error messages, and the JavaScript should be well-organized with functions, comments, and event handlers.

Paper For Above instruction

The objective of this assignment is to develop a comprehensive understanding of basic form validation and event handling in JavaScript by creating a dynamic, interactive registration form with an integrated calculator. The project emphasizes good coding practices, including separating concerns through functions, effective usage of event listeners, and proper styling and user feedback mechanisms.

The structure of the project revolves around creating a single HTML document, lab2.html, encapsulating all required elements: HTML markup, CSS styles, and JavaScript behaviors. This approach ensures the code is portable and maintainable while meeting specific functional and aesthetic criteria.

The HTML markup should feature a well-organized registration form with clearly labeled input fields, including text boxes for first and last names, a student ID, a biography textarea, and the calculator interface. The name fields must accept only alphabetic characters with the initial letter capitalized; validation should enforce this rule. The student ID must accept exactly nine digits. The biography textarea should restrict input to a maximum of twenty-five words. Accessibility best practices entail associating labels with respective input elements, ensuring the form is easy to navigate and understand.

The calculator component is notably complex, requiring 18 buttons, each with specified behaviors. Numeric buttons (0-9) should either start a new number or append depending on user context. The operational buttons (+, -, *, /) append corresponding operators to an expression. The '=' button evaluates the expression, with proper error handling for invalid inputs, such as non-numeric characters and division by zero. The 'C' button resets the calculator display and internal state. The > buttons perform digit shifting operations—shifting the current number one digit to the left or right, respectively. These behaviors must be implemented carefully to manage the display string and internal calculation state.

Interaction with the calculator and form validation should update the user interface in real time. When the 'Save' button is clicked, it attempts to transfer the current calculator result to a dedicated span labeled "Hours Worked This Week." If the result is not a valid number or is empty, an error message appears. Otherwise, it updates the span's content. The form submission process involves thorough validation of all inputs: checking non-empty fields, ensuring name formatting, ID digit count, word count in biography, and calculator correctness. Only when all validations pass should an alert summarize all input values and confirm submission. If validation fails, the page background should change color, and detailed error messages should be displayed prominently in contrasting colors.

JavaScript functions should be modular, using clear naming conventions such as formSubmitted(), equalButtonPressed(), validateName(), updateCalculator(), etc. Comments should be inserted to clarify logic especially where calculations or state management occurs. Event listeners should be attached to form elements for handling clicks, key presses, and form submission, all using non-inline event handling to promote clarity and reusability.

CSS styles should be embedded within the <head> in a style block. The styles should define the visual appearance of the form, error messages, and any visual cues such as color changes for invalid inputs or errors. Consistency, readability, and accessibility are critical considerations to ensure the webpage renders properly across modern browsers including Mozilla Firefox 17+ and Internet Explorer 9+.

In essence, this project simulates a real-world form handling scenario with real-time validation, user feedback, interactive calculator functionality, and proper form submission management—all coded in a single, well-structured HTML file that demonstrates proficiency in web development fundamentals.

References

• Mozilla Developer Network (MDN) Web Docs. (2023). HTML: HyperText Markup Language. https://developer.mozilla.org/en-US/docs/Web/HTML
• Mozilla Developer Network (MDN) Web Docs. (2023). JavaScript Guide. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• W3Schools. (2023). HTML Forms. https://www.w3schools.com/html/html_forms.asp
• W3Schools. (2023). JavaScript Event Handling. https://www.w3schools.com/js/js_events.asp
• CSS-Tricks. (2020). Styling Forms with CSS. https://css-tricks.com/styling-forms-with-css/
• JSTutorials. (2022). Building a Basic Calculator with JavaScript. https://www.jstutorials.com/articles/building-basic-calculator
• Stack Overflow. (2023). How to validate form inputs in JavaScript. https://stackoverflow.com/questions/35758343/javascript-form-validation
• Addy Osmani. (2012). High Performance JavaScript. https://developers.google.com/web/fundamentals/performance/rendering
• ISO/IEC 9126-1:2001(E). (2001). Software engineering — Product quality — Part 1: Quality model.
• Google Developers. (2023). Best Practices for Accessibility in Forms. https://developers.google.com/web/fundamentals/accessibility/semantics/forms