Scribd
Upload
6 views1 page

ScreeningRound1 Task

The document outlines the UI requirements for adding a student, including a Student List table with search functionality and an Add Student Modal for inputting student details. The modal requires fields such as name, date of birth, gender, and contact information, with specific validation rules. It also specifies the use of React-compatible libraries, function components with hooks, and the implementation of a debounce search feature.

Uploaded by

juvekarashok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views1 page

ScreeningRound1 Task

The document outlines the UI requirements for adding a student, including a Student List table with search functionality and an Add Student Modal for inputting student details. The modal requires fields such as name, date of birth, gender, and contact information, with specific validation rules. It also specifies the use of React-compatible libraries, function components with hooks, and the implementation of a debounce search feature.

Uploaded by

juvekarashok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

ADDING STUDENT

First UI: Student List with table


List of added student Will Appear inside table with list of columns and with search option.
Student Name, Email Id, Phone Number, Father Name, Gender, Action [delete option.].
Sample UI is provided below.
Points:
1. Add any dummy user image.

Second UI: Add Student Modal


Create modal to accept the following input fields/date fields with validation.

1. Student Name: Required.


2. Date Of Birth: Required , Student get must be greater than 3 years.
3. Gender: Required.
4. Father Name: Required.
5. Mother Name: Required.
6. Email Id: Required, Valid Email (eg. [email protected])
7. Phone Number: Required, Valid Number (10 digit.)
8. Address: The address of the student. Required.

Points: There will be a submit button in the Add Student Modal and once user click on the
Submit button after filling the form modal should close and student details should appear in
the table list.

Note:
1. Candidate can use any library compatible with React.
2. Function component with hooks should be used.
3. Search should be implemented with debounce.

samplejson.txt

You might also like