import { useState } from 'react'; import { useFormStatus } from 'react-dom'; export default function App() { // Track current step (1, 2, or 3) const [step, setStep] = useState(1); // TODO: Task 1 - Initialize form state // Include: email, password, confirmPassword, firstName, lastName, bio, newsletter, agreeToTerms const [formData, setFormData] = useState({ email: '', password: '', confirmPassword: '', firstName: '', lastName: '', bio: '', newsletter: false, agreeToTerms: false, }); // Track field errors const [errors, setErrors] = useState({}); // Track which fields have been touched (for showing errors) const [touched, setTouched] = useState({}); // TODO: Task 2 - Implement handleChange for all input types // Handle text, checkbox, and textarea inputs const handleChange = (e) => { // Get name, value, type, checked from e.target // Update formData based on input type }; // TODO: Task 2 - Implement handleBlur to mark fields as touched const handleBlur = (e) => { // Mark field as touched // Run validation for current step }; // TODO: Task 3 - Implement validation for each step const validateStep = (stepNumber) => { const newErrors = {}; if (stepNumber === 1) { // Validate email: required, must contain @ // Validate password: required, min 8 chars // Validate confirmPassword: must match password } if (stepNumber === 2) { // Validate firstName: required // Validate lastName: required } if (stepNumber === 3) { // Validate agreeToTerms: must be checked } return newErrors; }; // TODO: Task 4 - Implement navigation const nextStep = () => { // Validate current step // If valid, go to next step // If invalid, show errors }; const prevStep = () => { // Go to previous step }; // Handle form submission async function handleSubmit(formData) { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)); console.log('Submitted:', Object.fromEntries(formData)); alert('Registration complete!'); } return (

Create Account

{/* TODO: Task 5 - Progress indicator */}

{/* Show step indicators 1, 2, 3 */} {/* Current step should have 'active' class */} {/* Completed steps should have 'completed' class */}

{/* Step 1: Account Info */} {step === 1 && (

Account Information

{/* Email field */} {/* Password field */} {/* Confirm Password field */}

)} {/* Step 2: Profile Info */} {step === 2 && (

Profile Information

Bio (optional)

</div>

<div className="form-actions">
                <button type="button" className="btn btn-secondary" onClick={prevStep}>
                  Back
                </button>
                <button type="button" className="btn btn-primary" onClick={nextStep}>
                  Next
                </button>
              </div>
            </div>
          )}

{/* Step 3: Preferences */}
          {step === 3 && (
            <div className="step">
              <h2>Preferences</h2>

<div className="form-field checkbox-field">
                <label>
                  <input
                    type="checkbox"
                    name="newsletter"
                    checked={formData.newsletter}
                    onChange={handleChange}
                  />
                  Subscribe to newsletter
                </label>
              </div>

<div className="form-field checkbox-field">
                <label>
                  <input
                    type="checkbox"
                    name="agreeToTerms"
                    checked={formData.agreeToTerms}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                  I agree to the Terms of Service *
                </label>
                {touched.agreeToTerms && errors.agreeToTerms && (
                  <span className="error">{errors.agreeToTerms}</span>
                )}
              </div>

<div className="form-actions">
                <button type="button" className="btn btn-secondary" onClick={prevStep}>
                  Back
                </button>
                <SubmitButton />
              </div>
            </div>
          )}
        </form>
      </div>
    </div>
  );
}

// TODO: Task 5 - FormField component for reusable inputs
function FormField({ label, name, error, hint, required, ...props }) {
  const id = `field-${name}`;

return (
    <div className="form-field">
      <label htmlFor={id}>
        {label} {required && '*'}
      </label>
      <input
        id={id}
        name={name}
        // Add aria attributes for accessibility
        // aria-invalid={!!error}
        // aria-describedby for hint/error
        {...props}
      />
      {hint && <small className="hint">{hint}</small>}
      {error && <span className="error">{error}</span>}
    </div>
  );
}

// Submit button with loading state
function SubmitButton() {
  const { pending } = useFormStatus();

return (
    <button type="submit" className="btn btn-primary" disabled={pending}>
      {pending ? 'Creating Account...' : 'Create Account'}
    </button>
  );
}
</article></body></html>

Subscription Required