Angular SPA Assessment

Duration: 4 to 6 Hour Angular

ASSESSMENT

FITNESS TRACKER

HOME PLACE APP VIEW APP SEARCH CONTACT

HOME

PLACE APP

VIEW APP

SEARCH

CONTACT

Apply For Trainer

1. Important Instructions

2. Open the test link.

3. Use email, first name and last name to login to assessment. In case, you have to login again, you
must use the same email, first name and last name.
4. Click on “Start Assessment”
5. Click on “Open IDE”. Do not click on “Submit Workspace” until you want to make the
submission.
6. IDE will open in new tab.
7. It will take 3 min for IDE to load. It is advisable to wait for 3 min.
8. Once IDE is loaded, you can open the terminal (nodejs) by clicking Terminal -> Open Terminal In
Specific Container -> Nodejs terminal
9. Change to your project by using command “cd <ProjectName>”. You can type first 2 characters
of project-name and press TAB key to autofill project-name.
10. <ProjectName> will be mix of “FirstNameLastName-Unique-Hash-Code”
11. You can follow series of command to setup Angular environment once you are in your project-
name folder:
a. npm install -> Will install all dependencies -> takes 10 to 15 min
b. npm run start -> To compile and deploy the project in browser. You can
press <Ctrl> key while clicking on localhost:4200 to open project in
browser -> takes 2 to 3 min
c. npm run json-server -> to deploy fake rest api created with json-server ->
takes 10 to 15 seconds
d. npm run jest -> to run all test cases. It is mandatory to run this command
before submission of workspace -> takes 5 to 6 min
12. You may also run “npm run jest” while developing the solution to re-factor the code to pass the
test-cases.
13. Once you are done with development and ready with submission, you may navigate to previous
tab and submit the workspace. It is mandatory to click on “Submit The Workspace” after you are
done with code.
14. You may close all windows, once workspace is submitted!
2. Business-Requirement :

2.1 Problem Statement:

Create a single page application in Angular for fitness appointment.

2.1.1 Place Appointment:

The Place Appointment Component of Angular SPA allows you to:
1. Provide personal information
2. Select Preferences
3. Select Package
4. Place Appointment

2.1.2 View Appointment:

The View Appointment Component of Angular SPA allows you to:
1. Display all appointments in a responsive table format
2. Delete any appointment after confirmation
3. Edit appointment details

In this assessment you will develop single page application (SPA) using Angular.
3.1.1 Landing Page Elements

1. Transparent Logo
2. Nav Bar
3. Side Bar
4. Introduction Text (any)
5. Button
3.1.2 Landing Page Guidelines

1. “Apply For Trainer” i.e. 5 is a big button. Page is responsive.

2. Nav-bar and Side-bar will contain menu items and must be repeated on all pages:
a. Home
b. Place Appointment
c. View Appointment
e. Contact Us
3.1.3 Place Appointment Guidelines

1. On the page load, input focus must come to first name input field.
2. You should be able to press “TAB” key and “SHIFT + TAB” to navigate from top field to
bottom field and vice-versa.
3. On click of “Submit” button, appointment details must be saved via fake-rest API in
friends.json.
4. Fake rest api is implemented with json-server.
4. Firstname and Lastname must not allow numbers.
5. Age amount must allow numbers greater than 18 and less than 60 only
6. Email must have email validation.
8. Use fieldset for address.
10. Pincode must allow only number. The length of number must be 6. Length less than 6 or
more than 6 is not allowed.
13. Select a package has cost associated with each package.
3.1.4 View Appointments Page Guidelines
1. Table must be responsive.

2. Table must load data from response received by fake rest api running with json-server .
3.1.5 Contact Us Page Guidelines

1. Implement generic contact us form with basic fields and basic validation.
2. Contact details is required to be saved via fake rest-api.
3. It is to your discretion:
a. To choose the layout of contact form.
b. To choose alignment of form on the page.
c. To implement/non-implement the validation for each field in form.
d. To choose number of fields in contact us form.
4. Mandatory Assessment Guidelines
15. Open the test link received.
16. Use email, first name and last name to login to assessment. In case, you have to
login again, you must use the same email, first name and last name.
17. Click on “Start Assessment”
18. Click on “Open IDE”. Do not click on “Submit Workspace” until you want to make
the submission.
19. IDE will open in new tab.
20. It will take 3 min for IDE to load. It is advisable to wait for 3 min.
21. Once IDE is loaded, you can open the terminal (nodejs) by clicking Terminal ->
Open Terminal In Specific Container -> Nodejs terminal
22. Change to your project by using command “cd <ProjectName>”. You can type
first 2 characters of project-name and press TAB key to autofill project-name.
23. <ProjectName> will be mix of “FirstNameLastName-Unique-Hash-Code”
24. You can follow series of command to setup Angular environment once you are in
your project-name folder:
a. npm install -> Will install all dependencies -> takes 10 to 15 min
b. npm run start -> To compile and deploy the project in browser. You can
press <Ctrl> key while clicking on localhost:4200 to open project in
browser -> takes 2 to 3 min
c. npm run json-server -> to deploy fake rest api created with json-server ->
takes 10 to 15 seconds
d. npm run jest -> to run all test cases. It is mandatory to run this command
before submission of workspace -> takes 5 to 6 min
25. You may also run “npm run jest” while developing the solution to re-factor the
code to pass the test-cases.
26. Once you are done with development and ready with submission, you may
navigate to previous tab and submit the workspace. It is mandatory to click on
“Submit The Workspace” after you are done with code.
27. You may close all windows, once workspace is submitted!