https://github.com/sachindolase/event-registration-form

I want to build a form with dynamic fields and simple validation in event registration form.
https://github.com/sachindolase/event-registration-form

css3 html5 javascript reactjs useeffect usestate

Last synced: 27 days ago
JSON representation

I want to build a form with dynamic fields and simple validation in event registration form.

• Host: GitHub
• URL: https://github.com/sachindolase/event-registration-form
• Owner: sachindolase
• Created: 2024-06-21T09:37:58.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T10:16:06.000Z (6 months ago)
• Last Synced: 2024-06-23T02:53:36.761Z (6 months ago)
• Topics: css3, html5, javascript, reactjs, useeffect, usestate
• Language: JavaScript
• Homepage: https://event-registration-form-three.vercel.app/
• Size: 184 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Surdeep singh React.js Developement Assignment

# Level 1: 

Basic Dynamic Form with Conditional Fields.

# Objective: 

Build a form with dynamic fields and simple validation.

# Form Type: Event Registration Form

# Tasks:

1. Form Fields:

○ Name (Text)

○ Email (Email)

○ Age (Number)

○ Are you attending with a guest? (Yes/No)

○ Guest Name (Text, visible only if attending with a guest)

2. Conditional Logic:

○ Show the "Guest Name" field only if the "Are you attending with a guest?"

field is answered with "Yes".

3. Validation:

○ Name: Required

○ Email: Required and must be a valid email format

○ Age: Required and must be a number greater than 0

○ Guest Name: Required if attending with a guest.

4. Submission:

○ On form submission, display a summary of the entered data.

# Requirements:

● Use React functional components and hooks (useState, useEffect).

● Implement custom hooks for form validation and management.

● Ensure a clean and user-friendly interface with clear error messages.

# Screenshots:

![Screenshot (678)](https://github.com/sachindolase/event-registration-form/assets/125812863/2d555172-8761-4b7d-9425-f928a3b49a21)

![Screenshot (679)](https://github.com/sachindolase/event-registration-form/assets/125812863/e7052a02-1644-43e3-9f76-53568242c193)

# Live Demo : https://event-registration-form-three.vercel.app/