SBA 316: The Document Object Model - User Registration Project

This project is a user registration and newsletter subscription form that includes custom form validation, DOM manipulation, and interactive styling. It meets all specified requirements for SBA 316, demonstrating a comprehensive application of JavaScript, HTML, and CSS techniques.

Project Description

The application features a User Registration Form with robust validation, enforcing minimum length requirements and a strong password policy. Users can create an account and receive feedback on successful registration. The project also includes a Newsletter Subscription Form and a Create Account button that toggles the registration form’s visibility. Interactive validation and dynamic feedback enhance user experience.

Requirements

All project requirements are completed, as detailed below:

DOM Manipulation

• Cache at least one element using getElementById.
• Cache at least one element using querySelector or querySelectorAll.
• Iterate over a collection of elements to accomplish a task.
  • Used forEach to validate input fields and adjust styling based on field values.
• Create at least one element using createElement.
  • Created a welcome message element upon successful registration.
• Use appendChild or prepend to add elements to the DOM.
  • Appended the welcome message to the page after successful registration.

User Interaction and Styling

• Modify HTML or text content based on user interaction (innerHTML, innerText, or textContent).
  • Updated message content based on registration success or failure.
• Modify style or CSS classes of elements in response to user actions (style, classList).
  • Adjusted input borders based on validation and added a highlight class to the form on hover.
• Modify at least one attribute of an element in response to user interaction.
  • Set focus to specific fields with .focus() based on validation feedback.

Browser Object Model (BOM)

• Use at least two BOM properties or methods.
  • Used alert() for user feedback and location.href to simulate a redirect after registration.

Form Validation

• Include a form or input with HTML attribute-based validation.
  • Used required and minlength attributes for form fields.
• Include DOM event-based validation for a form or input.
  • Implemented custom validation for password complexity, minimum length, and confirmation matching, displaying error messages with alert().

Git and Documentation

• Commit frequently to a git repository.
• Include a README file with a description of your application.