This test introduces a http based search of Rick & Morty characters. The following will test the use of common apis in Angular as well as your approach to solving the problems outlined.
Route A: Press the "Fork" button located at the top left of this page. This will instantly generate a new url and copy of this test for you to work on.
Save the url it generates, this is where you will demonstrate the changes you've made (you may need to sign in to do this).
Next Download the project to your local machine. To successfully run the project on your machine you will need.
- NodeJs: https://nodejs.org/en/
- Angular CLI: https://angular.io/cli
- VsCode (or Preffered Editor): https://code.visualstudio.com/
Route B: If you do not wish to download the project, you can apply changes directly in stackblitz. just remember to save the url for your demo (you may need to sign in to do this).
Api: https://rickandmortyapi.com/
-
Refactoring: Angulars strength lies in it's component re-usabality. Refactor the Mat-Card (containing the charachter info) into your own component. It must retain the same details and styling.
-
Fix the following 2 bugs related to filtering:
- A) When typing in the search box with a filter applied the search results ignore the filter setting.
- B) Changing the filter without searching does not update the results from the api, it just filters the currently visibile items.
- Order By: Currently there is not a way to order the search results. Implement a way to order the cards, by the characters first appearance in the show and another way of your choosing. e.g. A charachter who first appeared in S01E08 should be ordered after somone who first appreaed in S01E03.
Once you have made all your changes, you can simply drag and drop your new files here. https://developer.stackblitz.com/docs/platform/importing-projects/
If you have questions reach out to us at (use both emails)
Good luck!