Interactive Form
(View this project from GitHub)
This project implemented via using JavaScript and here are some main items about it:
Focus on Name Field on Page Load: Ensures the cursor automatically focuses on the "Name" input field when the page first loads.
Show/Hide "Other Job Role" Field: Dynamically shows or hides the "Other Job Role" input field based on the user's selection in the "Title" dropdown.
T-Shirt Design and Color Selection: Displays the available color options for the T-shirt based on the selected design theme.
Activity Registration and Total Cost Calculation: Tracks the total cost of activities based on the user's selections.
Hide/Show Payment Methods Based on Selection: Displays the relevant payment options (PayPal, Bitcoin, or Credit Card) based on the user's choice.
Form Validation (Name, Email, Activities, Payment): Ensures the form is filled out correctly before submission by validating various input fields.
Real-Time Validation for Credit Card Fields: Provides real-time feedback for the credit card CVV fields to ensure it is numeric and exactly 3 digits long.
Prevent Selecting Conflicting Activities: Prevents users from selecting activities that happen at the same time.
Activity Registration Focus: Adds a focus effect when the user interacts with activity checkboxes.
Key Features:
Interactive Form Fields:
Dynamic visibility of input fields (e.g., "Other Job Role" and payment options).
Real-time Validation: Instant feedback for CVV input fields.
Activity Management: Automatically calculates the total cost and prevents conflicting activity selections.
Focus Management: Ensures the user’s experience is smooth by focusing on the "Name" field and managing focus for activity checkboxes.
Error Handling: Provides user-friendly error messages for missing or incorrectly formatted inputs.
Keep learning and keep move forward.