Fix Duplicate Form Fields and Improve Accessibility in Signup Page

[Mujahid087]

Signup Page

Overview

This repository contains the code for a user signup page. The page allows users to create an account by providing their username, email, and password. The form includes validations to ensure that the user enters a valid email from trusted providers.

Features

• User Registration: Allows users to sign up with a username, email, and password.
• Password Visibility Toggle: Users can toggle password visibility to check the password they are entering.
• Email Validation: Ensures that users enter a valid email address from trusted email providers (Gmail, Outlook, Yahoo, etc.).
• Responsive Design: The page is designed to be responsive and works on various screen sizes.
• Preloader: A loading animation is shown while the page is loading.

Improvements Made in This Version

1. Duplicate Form Fields Removed

• Fixed a bug where the email input field was duplicated. The redundant field was removed, leaving only one email input.

2. Enhanced Accessibility

• label elements for username, email, and password are now correctly associated with the respective input elements using the for attribute.
• This improves accessibility, especially for users with screen readers.

3. Password Visibility Toggle

• Added functionality to toggle password visibility, helping users see what they are typing for the password field.

4. Email Validation

• Added email validation to ensure that the user enters an email address from one of the trusted providers (e.g., Gmail, Outlook, Yahoo).
• If the user tries to submit an email from an untrusted provider, the form submission is blocked, and an alert is shown.

5. Code Refactor

• Removed redundant div elements and cleaned up the code for better readability and maintainability.

How to Use

Prerequisites:

• Basic knowledge of HTML, CSS, and JavaScript.
• A modern web browser (Chrome, Firefox, Edge, etc.).

Installation:

1. Clone the repository:

   git clone <repository-url>

[netlify]

✅ Deploy Preview for arcticdelights ready!

Name	Link
🔨 Latest commit	148bc96
🔍 Latest deploy log	https://app.netlify.com/sites/arcticdelights/deploys/6735ed60445087000869220e
😎 Deploy Preview	https://deploy-preview-842--arcticdelights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.