A clean, responsive sign-up form project using HTML, CSS, JavaScript, and Bootstrap; includes client-side validation, API-driven data lookups, username availability checks, and password suggestions.
- Live demo: https://www.r-siddiq.tech/Sign-Up-Page/
- Additional context: https://www.rsiddiq.com/internet-programming.html
- Scope: Frontend-only, static site
- Tech: HTML5, CSS3, JavaScript (no dependencies)
- Responsive sign‑up form UI
- Password fields with validation cues
- Interactive behaviors via JavaScript
- Custom validation logic
Sign-Up-Page/
├── index.html
├── welcome.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── img/
├── .gitignore
└── README.md
No dependencies or build required.
Double-click index.html in any modern browser.
Some browsers throttle local assets. Use a simple local server:
-
Python 3
python -m http.server
Visit http://localhost:8000/
-
Node (npx)
npx http-server .Follow the printed URL.
- Bootstrap 5.3.3 (CDN) is used (linked in
<head>). Add this note and the CDN tag in the README for clarity/troubleshooting.
Document these so reviewers know what dynamic pieces do and why they may fail offline:
https://csumb.space/api/cityInfoAPI.php?zip=<ZIP>→ populates City, Latitude, Longitude on#zipchange.https://csumb.space/api/countyListAPI.php?state=<STATE>→ populates County dropdown on#statechange.https://csumb.space/api/usernamesAPI.php?username=<USERNAME>→ shows “Username available/taken” as the user types.https://csumb.space/api/suggestedPassword.php?length=8→ shows a suggested password on focus of password field.
Note: Since these are third-party endpoints, outages/CORS/network issues will disable dynamic features. No keys/tokens required.
- First Name / Last Name: plain text inputs.
- Gender:
Male/Femaleradios. - Zip: triggers City/Lat/Long lookup (read-only spans).
- State: triggers County dropdown population.
- Desired Username: checks availability live; shows inline error/status.
- Password / Confirm Password: displays inline errors; shows a suggested password on focus.
- Submit: navigates to
welcome.htmlonly if validation passes.
-
Username: required; shows “Username is required!”. Live availability via API (“available”/“taken”).
-
Password:
- Required; error: “Must enter a password!”
- Minimum length: 6; error: “Password must be at least 6 characters long!”
-
Confirm Password:
- Required; error: “Must confirm your password!”
- Must match password; error: “Passwords do not match!”
-
Zip/City/County/State: populated/validated by API responses (no HTML5 pattern constraints in markup).
There’s no email field and no HTML5 pattern validation on username/zip.
action="welcome.html", nomethodspecified → defaults to GET.- No backend; the page does not persist user data.
welcome.htmlis a simple landing page.
- Inputs for First/Last Name are preceded by text rather than
<label for="...">; consider adding labels bound to inputids. - Radio buttons use labels correctly.
- All interactive controls are keyboard-reachable.
- Consider adding descriptive
aria-live="polite"to the inline error/status spans.
- All data stays client-side; API requests are anonymous GETs to
csumb.space. No credentials/PII persisted by this project.