Challenge Overview
Welcome to Quartz DKS Prototype Challenge.
We need your help to create the prototype of a simple web application we’re building to help predicting problems and serve as tool for allowing users to score these issues through a very easy-to-use platform.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular 4.x (latest). This means that you must use Angular 4.x in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project ready to accept RESTFUL API responses.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
General Workflow
- Any user from the company can access the application.
- In the first page, user gets to select any facility available from around the world.
- Next, user sees a set of problem predictions for the selected facility.
- User is able to interact with the predictions, by viewing more details or by assigning importance values to the items.
- User is able to save records as “interesting/favorites”, adding them to collections.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files data (sample JSON provided).
1. Login
There’s no design provided. Please use landing screen as a start point (header, footer) and add login/password text fields in the middle using same style from text fields across the design.
No need to add remember me, forgot password, etc. Just a simple login/password with submit button.
2. Landing
See 01_01, 01_02 Landing Page.png.
Please change the date selector with one single dropdown instead of three. The dropdown will contain a list of dates e.g.:
- 01/01/2017
- 01/22/2017
- 02/04/2017
- etc.
Remove Phase dropdown (move date to the left).
Remove country dropdown.
3. Prediction List
See all 03 and 04 screens.
Issues List
- Create active-ascendent/active-descendant/inactive states for the table header icon (sorting functionality is out of scope).
- Pagination is out of scope.
- Filters should display an overlay with parameters (actual filtering feature is out of scope).
- Issues content is expandable by clicking on the row.
- View log data link activates the log popup. Ignore print/save links, don’t add them.
Folders
Left column features a dynamic collections area where user can:
- Create new collections.
- Filter collections by several parameters (show the overlay - functionality out of scope).
- Search collections by string (functionality out of scope but create the proper markup).
- Explore/see collections content. When a collection is selected, issues list on the right side gets updated with the issues contained in that collection.
- Drag items from the issues list and drop in any of the collections on the left side (either in the folder list or in the folder details view).
- After user drops an item, a saving animation must show up. User can add a note to the recently added issue.
- Remove from the list.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap (if needed).
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You should avoid using jQuery since it’s known to have interoperability issues with Angular 4. Justify in forums why would you need it.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop.
- Mobile not supported, not required.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
We need your help to create the prototype of a simple web application we’re building to help predicting problems and serve as tool for allowing users to score these issues through a very easy-to-use platform.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular 4.x (latest). This means that you must use Angular 4.x in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project ready to accept RESTFUL API responses.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
General Workflow
- Any user from the company can access the application.
- In the first page, user gets to select any facility available from around the world.
- Next, user sees a set of problem predictions for the selected facility.
- User is able to interact with the predictions, by viewing more details or by assigning importance values to the items.
- User is able to save records as “interesting/favorites”, adding them to collections.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files data (sample JSON provided).
1. Login
There’s no design provided. Please use landing screen as a start point (header, footer) and add login/password text fields in the middle using same style from text fields across the design.
No need to add remember me, forgot password, etc. Just a simple login/password with submit button.
2. Landing
See 01_01, 01_02 Landing Page.png.
Please change the date selector with one single dropdown instead of three. The dropdown will contain a list of dates e.g.:
- 01/01/2017
- 01/22/2017
- 02/04/2017
- etc.
Remove Phase dropdown (move date to the left).
Remove country dropdown.
3. Prediction List
See all 03 and 04 screens.
Issues List
- Create active-ascendent/active-descendant/inactive states for the table header icon (sorting functionality is out of scope).
- Pagination is out of scope.
- Filters should display an overlay with parameters (actual filtering feature is out of scope).
- Issues content is expandable by clicking on the row.
- View log data link activates the log popup. Ignore print/save links, don’t add them.
Folders
Left column features a dynamic collections area where user can:
- Create new collections.
- Filter collections by several parameters (show the overlay - functionality out of scope).
- Search collections by string (functionality out of scope but create the proper markup).
- Explore/see collections content. When a collection is selected, issues list on the right side gets updated with the issues contained in that collection.
- Drag items from the issues list and drop in any of the collections on the left side (either in the folder list or in the folder details view).
- After user drops an item, a saving animation must show up. User can add a note to the recently added issue.
- Remove from the list.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap (if needed).
- You are allowed to use SCSS in the project.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript Requirements
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You should avoid using jQuery since it’s known to have interoperability issues with Angular 4. Justify in forums why would you need it.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop.
- Mobile not supported, not required.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).