Build Front End Page with Angular Framwork
Budget: $250 – $750 USD
Build a complete set of Angular Front End Code for 3 screen below for initial stage. If work done in quality , will have long term business task.
3 Pager of UI
Page 1- Login
LAN ID
>> only allow numeric "0-9" and "."
>> minlength of 7 and maxlength of 15
Password
>> mask when key in value
>> allow combination of special characters and alphanumeric (a-zA-Z0-9)
All inputs in Login page are not allowed to key in whitespace and emoji
Able to detect error message during input change event or using FormControl
Able to show error message under input or in a modal pop up
Page 2 - Landing page
1. Able to loop the record into table dynamically based on the numbers of records in a list
2. Able to scroll the page/support scrolling which starts from the table records (exclude table header)
3. Pagination (First, Last, Prev, Next, and specific page)
4. Delete button is disabled by default, only enable if have more than 1 table record is being checked
- If all record is unchecked, disable the Delete button again
5. Able to support work-break for long Error Message
6. Able to add icon inside input and is clickable
7. Able to redirect / open a modal when click on Filter and Add button
Page 3 - Maintenance page
1. Able to put input inside the table cell
2. Decimal input handling when key in value (for example: when key in 5, the input should show 0.05)
-------------------------------------------------------------------------------------------------------------------------
**Shared components/Global:
- Customized Input with optional parameters
>> can put different icon (size, color, name)
>> border, border color, border radius
>> input text/placeholder/background color
- Customized Button
>> can set different text/border/background color
- Error modal
- Acknowlegement modal
- Top navigation
>> able to support redirection
>> not impacting the height of top navigation when change logo image
- Side navigation
>> able to expand and collapse
>> support main menu and submenu
>> support redirection
>> support icon with label/label only
>> responsive sidenav content when apply mode behavior (if using <mat-sidenav>)
- Global Font, color
- Loading
- All buttons and links are able to support redirection (router) / open a new tab if is external url / open a modal
- support RWD
3 Pager of UI
Page 1- Login
LAN ID
>> only allow numeric "0-9" and "."
>> minlength of 7 and maxlength of 15
Password
>> mask when key in value
>> allow combination of special characters and alphanumeric (a-zA-Z0-9)
All inputs in Login page are not allowed to key in whitespace and emoji
Able to detect error message during input change event or using FormControl
Able to show error message under input or in a modal pop up
Page 2 - Landing page
1. Able to loop the record into table dynamically based on the numbers of records in a list
2. Able to scroll the page/support scrolling which starts from the table records (exclude table header)
3. Pagination (First, Last, Prev, Next, and specific page)
4. Delete button is disabled by default, only enable if have more than 1 table record is being checked
- If all record is unchecked, disable the Delete button again
5. Able to support work-break for long Error Message
6. Able to add icon inside input and is clickable
7. Able to redirect / open a modal when click on Filter and Add button
Page 3 - Maintenance page
1. Able to put input inside the table cell
2. Decimal input handling when key in value (for example: when key in 5, the input should show 0.05)
-------------------------------------------------------------------------------------------------------------------------
**Shared components/Global:
- Customized Input with optional parameters
>> can put different icon (size, color, name)
>> border, border color, border radius
>> input text/placeholder/background color
- Customized Button
>> can set different text/border/background color
- Error modal
- Acknowlegement modal
- Top navigation
>> able to support redirection
>> not impacting the height of top navigation when change logo image
- Side navigation
>> able to expand and collapse
>> support main menu and submenu
>> support redirection
>> support icon with label/label only
>> responsive sidenav content when apply mode behavior (if using <mat-sidenav>)
- Global Font, color
- Loading
- All buttons and links are able to support redirection (router) / open a new tab if is external url / open a modal
- support RWD