React JS Machine Test
Total time : 3 hour
Final project compress to zip and share to any of the following email
1)
[email protected] 2)
[email protected]Create a small react application based on following requirements.
Total 5 pages
1) Home page
2) About page
3) Posts
4) Post details
5) Contact
All page’s header contains the navigation to Home, About, Posts, Contact
Home
Home page should contain 2 components.
1) Full width Carousel
for carousel you can add any 5 images
2) Team members list
Them members you will get detail from following api
https://jsonplaceholder.typicode.com/users
From the Api take each user's name, email and phone. When clicking on the user then
show the particular user details in a modal.
About
About page you can make with your own creativity
Posts
Post page you have to list all posts which you can fetch from the following Api
https://jsonplaceholder.typicode.com/posts
From the Api you can take the title and body's first 50 characters to make the list and when
clicking on each post will navigate to the post details page.
you will get post details from the following api
https://jsonplaceholder.typicode.com/posts/{id}
and particular post's comment you will get from the following Api
https://jsonplaceholder.typicode.com/posts/{id}/comments
Contact Page
make a contact page with following form fields
first name, last name, email, phone number, gender, date of birth, state, city, pincode and
address.
here first name, last name, email, phone number and pin code fields like input
gender field like radio button
date of birth field should be date picker
state field should be select box (for now just add any 5 state)
address field like textarea
And submit with validation, if validation is successful then log all field’s values in the console.
Validation rules
1) All fields are required
2) First name and Last name maximum 15 characters
3) Email should be mail format
4) Phone number should be 10 digits
5) Pin code should be 6 digits
6) Date of birth should be past dates (can’t able to pick current and future dates)
7) Address maximum 150 characters.