JTG: FE Assignment Round

Instructions
(Please make sure to read all the instructions before starting the assignment.)

1. Please go through all the design & description. Discuss any doubts & queries with the
interviewer.
2. Please keep the home assignment handy.
3. Please provide the estimations to the interviewer in your calyxpod link only.
4. Do the assignment in priority order.
5. Do not wear any headphones/earphones during the interview.
6. Make sure proper connectivity before starting the assignment.
7. Close all the unnecessary applications & tabs.
8. You can use Visual Studio or any other similar code editor for this assignment.
9. Once the assignment is complete make a proper zip of the assignment & rename with
file in the format [Your Name]-JTG-R1.zip & upload on given submission link.
10. Use of google is allowed but make sure you’re using it for concepts only. Do not copy
paste anything from google. Do not refer to any similar assignment or code from
google. If any discrepancy or copy paste is found then the interview will be canceled.
11. Do not leave the interview without the interviewer's permission.
12. You can re-use the carousel library already implemented in your assignment.

Assignment UI:
https://drive.google.com/file/d/1Wb-5-TcAHMNasIkQKCJra6cFRO_kfysm/view?usp=sharing

Functionality List:
1. Implement the above screens using HTML, CSS, and JS only on the top of your
home assignment.
2. Design layout UI without the use of table, td, th tags.
3. No third party JS/CSS framework or library should be used in this assignment
round. Avoid using libraries like Bootstrap and jQuery. You can use the library
that is already used in your assignment for the carousel.
4. The UI Should have a carousel to show the requested dishes.
5. Below the Carousel there should be a “Request a Dish” button, On Click it
should show the Form UI below the carousel.
6. Users should be able to fill the form fields i.e Name, Price range, Preparation
time, Recipe and Image URL.
7. The form should have a “Request Dish” button. When a user clicks on the
 Request Dish button, the validation should be performed on the input fields
and alert the user if invalid. You can use default Javascript alert for showing
the validation.
8. You can add Numeric Validation on the price range & preparation timing.
9. The form should have a “Cancel” button to clear & hide the form.
10. If the validation is successful, add the card as per the above UI. The card
should contain all the details filled in form as given UI.
11. A user can click on the delete icon to delete the requested UI.
12. Use browser storage to persist your data. Data records should persist in
browser memory. So, if a user refreshes the page all the items will be rendered
back with respective stylings.

Priority List:
1. Add a container of 1280px max-width so it will keep your UI always in the center
of your screen.
2. Add Form with all the fields & buttons.
3. Form Validation for all fields with javascript default alerts to notify
users
4. Implement request dish Card UI.
5. Integrate the data from the form with the requested dish carousel.
6. Implement the update and delete functionality.
7. Implement persistent storage.

Good to Have
1. A user can click on the Edit icon to update the requested dish.

Upload Assignment Here