✍️ Sign-Up Form

A meticulously styled and validated sign-up form, developed as a core project for The Odin Project's curriculum, focusing on advanced HTML forms and client-side input validation.

📸 Demo

Here is a visual representation of the sign-up page: https://cooleditingx.github.io/Odin_Sign-up-form/

The design features a two-column layout, separating the branding/image from the form inputs.

---

📖 Description

This project fulfills the requirements for The Odin Project's Forms section, tasking the developer with creating a realistic sign-up interface. The application is built with a focus on good user experience and robust client-side validation, ensuring users submit correctly formatted data before attempting to submit the form.

The design utilizes a large background visual and a clean, responsive layout to present a professional sign-up experience.

---

💻 Local Setup & Usage

This is a client-side web application and requires only a web browser to run.

How to Copy it for Your Own Computer

1. Clone the Repository: Open your terminal or command prompt and clone the project:

   git clone [https://github.com/cooleditingx/Odin_Sign-up-form.git](https://github.com/cooleditingx/Odin_Sign-up-form.git)
   cd Odin_Sign-up-form

2. Open and Use: Simply open the primary file, index.html, in your web browser.

   open index.html # For macOS/Linux
   # OR
   start index.html # For Windows

How to Use it

• Fill in all required fields (First Name, Last Name, Email, Password).
• Test the real-time validation by entering invalid data (e.g., a poorly formatted email or a short password).
• The form button will only become fully functional when all inputs meet the validation criteria.

---

✨ Features

The sign-up form includes the following technical and design features:

• Client-Side Validation: Uses a combination of HTML5 validation attributes (like required and pattern) and custom JavaScript feedback for inputs.
• Password Confirmation: Includes JavaScript logic to ensure the user's password input matches the confirmation input before submission is allowed.
• Responsive Design: Optimized for different screen sizes, ensuring readability and usability on both mobile devices and desktops.
• Modern Aesthetics: Features a clean, two-panel design with a prominent background image and clear typography for a modern look.
• Semantic HTML: Utilizes appropriate HTML form elements and structure for accessibility and clarity.

---

🛠️ Technologies Used

Technology	Role
HTML5	Provides the semantic structure of the form and inputs.
CSS3	Handles the styling, responsive layout, and visual presentation.
JavaScript (ES6+)	Implements robust client-side validation logic and dynamic input feedback.