Registration Form with Validation (TypeScript Version)

This project is an interactive registration form with data validation, rewritten from JavaScript to TypeScript. It demonstrates the use of static methods in a UserUtils class to validate user input, leveraging TypeScript's type safety and modern features.

---

Key Features

• Email Validation: Checks the correctness of the email format using a static method.
• Password Validation: Password must contain at least 8 characters, including a digit, an uppercase letter, and a special character (@, !, &, ?).
• Password Confirmation: Ensures the password and confirmation match.
• Success Message: Shows a confirmation after successful registration.
• Form Reset: Automatically resets the form 5 seconds after successful submission.
• Responsive Design: The form and messages display correctly on all device sizes.
• TypeScript: Code rewritten to TypeScript for better maintainability and error checking.

---

Technologies Used

• HTML: Structure of the form and messages.
• CSS: Styling and responsive design.
• TypeScript: Validation logic, static methods, and form reset.
• tsconfig.json: Configured to target ES2015 and browser APIs.

---

How It Works

The validation logic is encapsulated in the UserUtils class with static methods:

• UserUtils.validateEmail(email: string): boolean — checks if email contains '@' and a dot after it.
• UserUtils.validatePassword(password: string): boolean — verifies password length and complexity.

When the form is submitted:

1. Validation methods check the inputs.
2. Errors display inline if validation fails.
3. On success, the form hides, a success message shows.
4. After 5 seconds, the form resets and is displayed again.

---

Usage

1. Open index.html in a browser.
2. Fill out the registration form.
3. Submit and see validation in action.
4. After success, the form resets automatically.

---

Development

To build or modify the project:

• Make changes in src/script.ts.
• Compile with npx tsc (configured by tsconfig.json).
• Open or refresh index.html to see updates.