You can see the demo version of this project under the link - https://shimanskayaelena.github.io/list-worker/
Exercise
Write a single web page that: http://jsonplaceholder.typicode.com/users
- When loaded, gets a list of users from the following url:
- Displays some basic info of the users in an html table or whatever you want.
- Allows opening a detailed view for a user in a modal window on the current page.
- Add some basic CSS to make the table and other elements easy on the eyes.
- Make the page support browser refresh and bookmarkable, where it re-opens a users`s detailed view in case it was opened before.
Pre start
- Create a github/ bitbucket/ etc repository and provide a link.
- Estimate each task of the project in hours before start it and provide estimated time.
- After finishing all tasks provide us elapsed time for each task, if you spent time on research specify how much time has been spent.
Guidelines
- Frequent commit history.
- Write .html / .css / .js / .ts in separate files.
- All files should be separated by parts (directories) for which they are responsible, part includes .html / .css / .js / .ts files.
- Prepare all needed npm / grunt / gulp etc. tasks to run app / lints / tests / etc.
- Describe in readme file how to start and use your project`s tasks.
- Code should be readable so make sure it is adjusted and easy to read.
- Angular 2 is mandatory. If you want, you can use jquery or other libraries / packages. But don`t use 3d-party library for modal window.
- The project should be able to run with a basic static web-server with minimal congiguration.
- Feel free to add comments in the code on possible issues / decisions you had to take. 10.* Bonus - use eslint / tslint and please make sure that your code without linter errors / warnings. 11.* Bonus - write your solution in TypeScript and make it fully typed. 12.* Bonus - make the most of opportunities of ES6 if appropriate. 13.* Bonus - tests.
What else to read https://angular.io/guide/quickstart https://egghead.io/courses/angular-2-fundamentals https://rawgit.com/johnpapa/angular-2-first-look-launcher/master/index.html https://github.com/AngularClass/awesome-angular - thousands of them
This project was generated with Angular CLI version 1.1.1.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.