build me a full stack project with Angular
Budget: $10 – $70 USD
In this exercise, you will build a page JSFiddle (https://jsfiddle.net/), based on the attached images
using JS, HTML, and CSS.
- You may use Angular 1 but Angular 2 is strongly preferred.
- You may use a CSS preprocessor as well (SASS, LESS, etc.).
1) Construct a data response (based on the data in the images) as you would ideally
like to see it coming from a server API. Think about how your response model could
be used not only on this UI, but on other future UIs as well.
2) Style the page, matching the visual design as closely as possible.
- Today’s change (as percent and dollars) is green, red, or gray, depending on
whether the percent change is positive, negative, or zero. If it is positive or
negative, display a single plus-sign or minus-sign.
- The phone frame in the images is only for reference.
3) Sorting
Clicking on the “Account” table header will sort the items by the account’s number (i.e.
“IRA – 0123” is smaller than “AAA – 5920” because “0123” is smaller than “5920”).
Clicking on the “Available Cash” table header will sort the items by it available cash
amount.
1. If the field is not yet sorted, it should be sorted ascending.
2. If the field is sorted ascending, it should be sorted descending.
3. If the field is sorted descending, it should be sorted ascending.
Next to the sorted field there will be a `^` character if ascending, `v` if descending.
Note: The sorting will simulate a server side sorting, meaning that it will sort the whole
list, including the hidden items (see next item).
4) Load more
Clicking on `Load more` will display the rest of the items.
using JS, HTML, and CSS.
- You may use Angular 1 but Angular 2 is strongly preferred.
- You may use a CSS preprocessor as well (SASS, LESS, etc.).
1) Construct a data response (based on the data in the images) as you would ideally
like to see it coming from a server API. Think about how your response model could
be used not only on this UI, but on other future UIs as well.
2) Style the page, matching the visual design as closely as possible.
- Today’s change (as percent and dollars) is green, red, or gray, depending on
whether the percent change is positive, negative, or zero. If it is positive or
negative, display a single plus-sign or minus-sign.
- The phone frame in the images is only for reference.
3) Sorting
Clicking on the “Account” table header will sort the items by the account’s number (i.e.
“IRA – 0123” is smaller than “AAA – 5920” because “0123” is smaller than “5920”).
Clicking on the “Available Cash” table header will sort the items by it available cash
amount.
1. If the field is not yet sorted, it should be sorted ascending.
2. If the field is sorted ascending, it should be sorted descending.
3. If the field is sorted descending, it should be sorted ascending.
Next to the sorted field there will be a `^` character if ascending, `v` if descending.
Note: The sorting will simulate a server side sorting, meaning that it will sort the whole
list, including the hidden items (see next item).
4) Load more
Clicking on `Load more` will display the rest of the items.