Challenge Overview
Styx provides high-technology products and services for the building industry. The client is looking to create a browser based diagnostics application (eventual web based application) that allows facility managers of commercial buildings to monitor faults across HVAC systems and related energy impacts. This application have some basic screen, in this first contest you need to build all screens and all its functionality EXCLUDING ALL CHARTS. Refer to Interaction Document for screens and its functionality detail. For the look and feel of this application and buttons hover state please refer to Look and Feel Document.
General Guidelines:
- The size of application should be fluid horizontally and vertically and fully fill the browser.
- This application is built using HTML5, CSS3 and JavaScript technology. You must use HTML5 Api before using the plugin.
- You need to build and implements all required screens. All functionality and assets is provided. For screen details, its functionality and interaction, please refer to Interaction Document.
- Use Highcharts for implementing graph and charts in this application.
- Documented all JavaScript methods and parameters in your solution. All methods params and its return value should be documented.
- Create a JSON file and all settings in preferences screen needs to be saved in this file. The overall application will be loaded by default using this settings. After saving the preferences, application will use this settings when it is reloaded.
MAKE SURE TO WATCH CONTEST FORUM FOR ANY ADDITIONAL REQUIREMENTS AND CLARIFICATIONS THAT MAY BE ISSUED.
Final Submission Guidelines
Following are specific requirements for HTML, CSS and JavaScript files:
- Your HTML code must be HTML5.
- 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.
- 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 tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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".
- 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 are allowed to use the JQuery JavaScript library for this contest. Document your JS code for all parameters and functions including its param and return value.