Challenge Overview
Competition Task Overview
LightSpeed is an Excel based VBA application and in this project we are converting this application to a web based app to make it much easier to use. The web app will be an HTML5 app with offlice capabilities.
In the past challenges we have already built a working prototype. In this challenge, we are adding more views and making some changes to the prototype.
We want to leverage HTML5/CSS3 and usage of angular.js is a requirement.
Key Requirements
- You must use the previous prototype (provided in the forum) as base and update it / add new pages.
- You must follow the provided storyboard to make the changes.
- Styling of the exising prototype should be followed.
- Make sure you check out the invisionapp demo, it shows some key features for this update.
- For Project View and WBS View, the detaills page (reachable from card view) must be updated so that only the listed editable fields are editable (right now they are all editable).
- For Project View and WBS View, the detaills page (reachable from card view) must be updated so that the content and styling (except that backgroud should be kept as is) is consistent with Project View_TG_102815.psd.
- Implement the other views based on the screenshots and the design.
- Billing Plan View and TM Rate View are missing from the design, but they are needed as well.
- Please create a prototype with good quality HTML and JS code (angular.js) showing the correct workflow.
- Test in all the required browsers.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements
All the other views from the screenshots should be added to the prototype following the same styling. Columns should match what are in the screenshots, data should come from json files and NOT hardcoded.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and Angular.js
- You must not use hardcoded data, all data should come from json files or saved to json files.
- 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 tables of data/information 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Libraries/Plugins
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 must use Angular.js in this challenge
- Any other libraries must be approved by us
Browser Requirements
- IE10 +
- Firefox latest
- Safari latest
- Chrome latest
Final Submission Guidelines
Submission Deliverables
- Complete prototype with all HTML / CSS / Javascript files.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.