Scribd
Upload
27 views

Angular6 Task

The document outlines requirements for developing a UI for a registration and profile system using Angular 6. It includes templates for homepage, registration, and profile pages and requirements for functionality like form validation, photo uploads, editable user data, and reactive form handling.

Uploaded by

TEIT38 prasad Pansare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Angular6 Task

The document outlines requirements for developing a UI for a registration and profile system using Angular 6. It includes templates for homepage, registration, and profile pages and requirements for functionality like form validation, photo uploads, editable user data, and reactive form handling.

Uploaded by

TEIT38 prasad Pansare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

UI Developer Assignment

Introduction
DemoApp consultancy approached you to deliver their HTML
website based on the following templates.

Home Page

User Registration

User Profile
Homepage

DEMO APP
User Registration Template

DEMO APP
User Profile Template

DEMO APP
Required Functionalities.

1. Transform all Screens into working HTML with valid linking,


i.e. Clicking on the register button should open the
registration form.

2. Registration form to open in a popup upon clicking the


"Register Button”.

3. The registration form should enable the user to:


a. Upload a photo (size restriction - 310x325 px).
b. Select Age using UI slider.
c. Interest Field allows a user to type in his/her interest, it should also
allow removal of the tag if required.

d. Once the user submits the registration form successfully, they will be
presented with a Profile Screen. Populate the Profile Screen with user
data filled in the registration form.

e. The data on the screen should be editable by clicking the Edit Profile
button.

f. Edit photo button can be used to change user’s photo from the Profile
Screen.
g. For the First name field, validation should be using regex: Only
alphabetic characters are allowed and the length should not exceed
20 characters. Please note this validation is required for the first name
field alone.
h. The address drop down will have two values:
i. Home: When selected, two fields appear under the option
namely: Address1 and Address2.
ii. Company: When selected, two fields appear: Company
Address 1 and Company Address 2.

The input for these fields should be validated.


General guidelines

1. Use Semantic Markup and HTML 5.

2. Use Angular 6, you can use any modified javascript if you want
to modify you can use AngularJs 6 supported scripting Library
3. Using Angular 6 , you should implement Routing and navigation,
Reactive forms, rxjs libraries i.e observables.This application
should be in component driven Architecture.
4. Pay attention to code quality and design patterns.
5. Implement data binding technique don't use local storage
6. Optimise for performance.
7.Use JSON server for api
Thank You

You might also like