Intelligent Registration System

A feature-rich, client-side registration form for QualityCheck QA with real-time validation, cascading location selects, password strength checking, and automated E2E testing via Cypress.

Features

• Personal Information — First name, last name, age, and gender
• Contact & Location — Email, phone, address, and Country → State → City cascading dropdowns
• Security — Password with strength indicator (Weak / Medium / Strong) and confirm password
• Email validation — Blocks disposable domains (e.g. tempmail.com, mailinator.com)
• Phone validation — Enforces country-specific format (e.g. India requires +91)
• Real-time validation — Submit button enabled only when all fields are valid
• Responsive layout — Mobile-friendly design with breakpoints for different screen sizes

Project Structure

intelligent-registration-system/
├── registration.html    # Main registration form
├── script.js            # Form validation and interaction logic
├── style.css            # Styling and responsive layout
├── package.json         # Dependencies (Cypress)
├── cypress.config.js    # Cypress configuration
└── cypress/
    ├── e2e/
    │   └── registration.cy.js   # E2E test for form submission
    ├── fixtures/
    └── support/
        ├── commands.js
        └── e2e.js

Supported Countries

The cascading dropdown supports multiple countries with states and cities:

Country	Example States
India	Punjab, Maharashtra, Karnataka, Tamil Nadu, Delhi
United States	California, New York, Texas, Florida, Illinois
United Kingdom	England, Scotland, Wales, Northern Ireland
Canada	Ontario, Quebec, British Columbia, Alberta
Australia	New South Wales, Victoria, Queensland, Western Australia
Germany	Bavaria, North Rhine-Westphalia, Berlin, Hamburg
France	Île-de-France, Provence-Alpes-Côte d'Azur
Japan	Tokyo, Osaka, Kyoto, Kanagawa
China	Beijing, Shanghai, Guangdong, Jiangsu
Brazil	São Paulo, Rio de Janeiro, Minas Gerais

Prerequisites

• Node.js (v14+ recommended)
• A local web server to serve the HTML (e.g. Live Server on port 5500)

Getting Started

1. Install dependencies

npm install

2. Serve the application

Start a local server in the project root. For example, with Live Server:

• Open registration.html in VS Code and use the "Go Live" button, or
• Use any static server (e.g. npx serve or npx http-server) and open the registration page

The Cypress E2E tests expect the app at:

http://127.0.0.1:5500/registration.html

If you use a different URL or port, update the cy.visit() URL in cypress/e2e/registration.cy.js.

3. Run E2E tests

Interactive mode:

npx cypress open

Headless mode:

npx cypress run

Ensure the registration page is served before running tests.

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, flexbox, grid)
Logic	Vanilla JavaScript
Testing	Cypress (E2E)

Password Strength Rules

• Weak — Fewer than 6 characters
• Medium — 6+ characters without both a number and a special character (!@#$%^&*)
• Strong — 6+ characters with at least one number and one special character